import { useState, useCallback } from 'react'

interface Props {
  onSearch: (query: string) => void
  onCategoryChange: (category: string | null) => void
  activeCategory: string | null
}

const categories = [
  { value: null, label: 'Tout', icon: '✨' },
  { value: 'wine', label: 'Vins', icon: '🍷' },
  { value: 'beer', label: 'Bières', icon: '🍺' },
  { value: 'spirit', label: 'Spiritueux', icon: '🥃' },
]

export function SearchBar({ onSearch, onCategoryChange, activeCategory }: Props) {
  const [query, setQuery] = useState('')

  const handleSearch = useCallback(
    (value: string) => {
      setQuery(value)
      onSearch(value)
    },
    [onSearch]
  )

  return (
    <div className="space-y-4">
      <div className="relative">
        <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-cellar-muted">
          🔍
        </span>
        <input
          type="text"
          value={query}
          onChange={(e) => handleSearch(e.target.value)}
          placeholder="Rechercher une boisson, un domaine, une région..."
          className="input-field pl-11"
        />
      </div>

      <div className="flex gap-2 flex-wrap">
        {categories.map((cat) => (
          <button
            key={cat.value ?? 'all'}
            onClick={() => onCategoryChange(cat.value)}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium transition-all duration-200 ${
              activeCategory === cat.value
                ? 'bg-cellar-gold text-cellar-bg shadow-lg shadow-cellar-gold/20'
                : 'bg-cellar-card border border-cellar-border text-cellar-muted hover:text-cellar-cream hover:border-cellar-muted'
            }`}
          >
            <span>{cat.icon}</span>
            <span>{cat.label}</span>
          </button>
        ))}
      </div>
    </div>
  )
}
