'use client'

interface SearchAndFilterProps {
  searchQuery: string
  onSearchChange: (v: string) => void
  filter: string
  onFilterChange: (v: string) => void
}

const FILTER_OPTIONS = ['all', 'granted', 'withdrawn', 'terms', 'privacy', 'cookies', 'marketing', 'analytics']

function filterLabel(f: string): string {
  return f === 'all' ? 'Alle' :
    f === 'granted' ? 'Erteilt' :
    f === 'withdrawn' ? 'Widerrufen' :
    f === 'terms' ? 'AGB' :
    f === 'privacy' ? 'DSI' :
    f === 'cookies' ? 'Cookies' :
    f === 'marketing' ? 'Marketing' : 'Analyse'
}

export function SearchAndFilter({ searchQuery, onSearchChange, filter, onFilterChange }: SearchAndFilterProps) {
  return (
    <div className="flex items-center gap-4">
      <div className="flex-1 relative">
        <svg className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
        <input
          type="text"
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          placeholder="E-Mail oder User-ID suchen..."
          className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        />
      </div>
      <div className="flex items-center gap-2 flex-wrap">
        {FILTER_OPTIONS.map(f => (
          <button
            key={f}
            onClick={() => onFilterChange(f)}
            className={`px-3 py-1 text-sm rounded-full transition-colors ${
              filter === f
                ? 'bg-purple-600 text-white'
                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
            }`}
          >
            {filterLabel(f)}
          </button>
        ))}
      </div>
    </div>
  )
}
