@props(['recentSearches' => [], 'categories' => []])
<x-dashboard.card>
    <form action="{{route('explore')}}" method="get">
        <div class="flex gap-4 flex-col sm:flex-row">
            <x-ui.input class="flex-1 relative group " name="search"
                        placeholder="Search deals, services, places">
                <x-dashboard.user.recent-search :searches="$recentSearches"/>
            </x-ui.input>
            <x-ui.select name="category" :options="$categories" value-key="id" label-key="name"
                         placeholder="All Categories" selectable-placeholder/>
            <x-ui.button icon="magnifying-glass" type="submit" variant="neutral" round/>
        </div>
    </form>
</x-dashboard.card>