@props(['mobile' => false, 'includeMenu' => true])

<div class="w-full flex items-center gap-0" x-data="{ hasSearch: @entangle('search').live, searchFocused: false }">
    <div class="relative flex-1">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            {{-- Default search icon --}}
            <svg wire:loading.remove wire:target="search" class="h-4 w-4 text-zinc-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
            {{-- Loading spinner while searching --}}
            <svg wire:loading wire:target="search" class="animate-spin h-4 w-4 text-indigo-500" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
        </div>
        <input
            wire:model.live.debounce.300ms="search"
            type="search"
            placeholder="Search cameras, brands, specs..."
            @focus="searchFocused = true; window.dispatchEvent(new CustomEvent('search-focused'))"
            @blur="searchFocused = false; window.dispatchEvent(new CustomEvent('search-blurred'))"
            class="block w-full pl-9 pr-9 {{ $mobile ? 'py-2 rounded-l-md' : 'py-2.5 rounded-l-lg' }} text-sm border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200"
        >

        {{-- Loading progress indicator --}}
        <div wire:loading wire:target="search" class="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-200 dark:bg-indigo-800 overflow-hidden {{ $mobile ? 'rounded-bl-md' : 'rounded-bl-lg' }}">
            <div class="h-full bg-indigo-500 dark:bg-indigo-400 animate-progress"></div>
        </div>

        <button
            x-show="hasSearch"
            wire:click="clearSearch"
            class="absolute inset-y-0 right-0 pr-3 flex items-center text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors"
            title="Clear search"
            style="display: none;"
        >
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    </div>

    @if($includeMenu)
        <!-- Megamenu Component - Connected to Search Box -->
        <div class="flex-shrink-0">
            @livewire('mega-menu', key($mobile ? 'mobile-menu' : 'desktop-menu'))
        </div>
    @endif
</div>