<template>
  <div
    v-if="(showSuggestions || showRecentSearches) && !searchQuery && isFocused"
    class="absolute top-full left-0 right-0 z-50 mt-1 max-h-80 overflow-y-auto bg-popover border border-border rounded-md shadow-lg"
  >
    <!-- Search Suggestions -->
    <div v-if="showSuggestions && suggestions.length > 0" class="p-3 border-b border-border">
      <div class="text-sm font-medium mb-2 text-foreground">Try searching for:</div>
      <div class="flex flex-wrap gap-1">
        <Button
          v-for="suggestion in suggestions"
          :key="suggestion"
          variant="ghost"
          size="sm"
          @click="$emit('apply-suggestion', suggestion)"
          class="h-6 px-2 text-xs hover:bg-accent hover:text-accent-foreground"
        >
          {{ suggestion }}
        </Button>
      </div>
    </div>

    <!-- Recent Searches -->
    <div v-if="showRecentSearches && recentSearches.length > 0" class="p-3">
      <div class="flex items-center justify-between mb-2">
        <div class="text-sm font-medium text-foreground">Recent searches:</div>
        <Button
          variant="ghost"
          size="sm"
          @click="$emit('clear-recent')"
          class="h-5 px-1 text-xs hover:bg-destructive hover:text-destructive-foreground"
        >
          Clear
        </Button>
      </div>
      <div class="flex flex-wrap gap-1">
        <Button
          v-for="recent in recentSearches.slice(0, 5)"
          :key="recent"
          variant="ghost"
          size="sm"
          @click="$emit('apply-recent', recent)"
          class="h-6 px-2 text-xs hover:bg-accent hover:text-accent-foreground"
        >
          <History class="w-3 h-3 mr-1" />
          {{ recent }}
        </Button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { History } from 'lucide-vue-next'

interface Props {
  showSuggestions?: boolean
  showRecentSearches?: boolean
  searchQuery: string
  isFocused: boolean
  suggestions: string[]
  recentSearches: string[]
}

withDefaults(defineProps<Props>(), {
  showSuggestions: true,
  showRecentSearches: true
})

defineEmits<{
  'apply-suggestion': [suggestion: string]
  'apply-recent': [search: string]
  'clear-recent': []
}>()
</script>