@props(['show' => false])

<div x-data="{ 
    query: '',
    results: [],
    loading: false,
    search() {
        if (this.query.length < 2) {
            this.results = [];
            return;
        }
        
        this.loading = true;
        fetch(`/api/search?q=${encodeURIComponent(this.query)}`)
            .then(response => response.json())
            .then(data => {
                this.results = data;
                this.loading = false;
            })
            .catch(error => {
                console.error('Search error:', error);
                this.loading = false;
            });
    }
}" 
    x-init="$watch('query', value => { if (value.length >= 2) search(); })"
    class="p-4">
    
    <div class="relative">
        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        <input type="text" 
               x-model="query"
               placeholder="Cari perusahaan, analisis, atau laporan..." 
               class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
               x-ref="searchInput">
        
        <div x-show="loading" class="absolute right-3 top-1/2 transform -translate-y-1/2">
            <div class="spinner-sm"></div>
        </div>
    </div>
    
    <div x-show="results.length > 0" class="mt-4 space-y-2">
        <template x-for="result in results" :key="result.url">
            <a :href="result.url" class="block p-3 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                <div class="font-medium text-gray-900 dark:text-white" x-text="result.title"></div>
                <div class="text-sm text-gray-500 dark:text-gray-400" x-text="result.subtitle"></div>
            </a>
        </template>
    </div>
    
    <div x-show="query.length >= 2 && results.length === 0 && !loading" class="mt-4 text-center text-gray-500 dark:text-gray-400 py-8">
        <i class="fas fa-search text-4xl mb-3 opacity-50"></i>
        <p>Tidak ada hasil ditemukan</p>
    </div>
</div>