'use client'

interface FilterDropdownProps {
  label: string
  value: string
  options: string[]
  onChange: (value: string) => void
  isDark: boolean
}

export function FilterDropdown({ label, value, options, onChange, isDark }: FilterDropdownProps) {
  const inputId = `filter-${label.toLowerCase().replace(/\s+/g, '-')}`
  return (
    <div className="flex flex-col gap-1">
      <label htmlFor={inputId} className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{label}</label>
      <select
        id={inputId}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className={`px-3 py-2 rounded-xl text-sm transition-colors ${
          isDark
            ? 'bg-white/10 border-white/20 text-white'
            : 'bg-white border-slate-200 text-slate-900'
        } border focus:ring-2 focus:ring-purple-500 focus:border-transparent`}
      >
        {options.map((opt) => (
          <option key={opt} value={opt} className="bg-slate-800 text-white">
            {opt}
          </option>
        ))}
      </select>
    </div>
  )
}
