{{-- Modern Sort Options Component --}}
@props(['sortBy' => 'featured'])

<div class="px-5 py-4 border-b border-zinc-100 dark:border-zinc-800">
    <label class="text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider mb-2 block">Sort by</label>
    <div class="relative">
        <select
            wire:model.live="sortBy"
            class="block w-full pl-4 pr-10 py-2.5 text-sm bg-zinc-50 dark:bg-zinc-800 border-0 rounded-xl text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 appearance-none cursor-pointer transition-all hover:bg-zinc-100 dark:hover:bg-zinc-700"
        >
            <option value="featured">Featured</option>
            <option value="price_low">Price: Low to High</option>
            <option value="price_high">Price: High to Low</option>
            <option value="newest">Newest First</option>
            <option value="name_az">Name: A-Z</option>
            <option value="name_za">Name: Z-A</option>
        </select>
        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
            <svg class="w-4 h-4 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>
            </svg>
        </div>
    </div>
</div>