@props(['route' => 'faqs'])

<div class="relative max-w-xl mx-auto">
    <form action="{{ route($route) }}" method="GET" class="relative">
        <input
            type="search"
            name="search"
            value="{{ request('search') }}"
            placeholder="Search for answers..."
            class="w-full pl-10 py-4 pr-20 rounded-full border border-gray-200 bg-white shadow-sm focus:border-primary focus:ring focus:ring-primary/20 focus:outline-none transition"
        />
        <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
            <x-ui.icon name="search" class="h-5 w-5" />
        </div>
        <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-full transition-colors duration-200">
            Search
        </button>
    </form>
</div>