"use client"

import { ChevronDown, Filter } from "lucide-react"
import type { Language } from "./LanguageTabs"

export type LanguageFilterValue = "all" | Language

const FILTER_OPTIONS: Array<{ value: LanguageFilterValue; label: string }> = [
  { value: "all", label: "Select All" },
  { value: "ar", label: "العربية" },
  { value: "en", label: "English" },
  { value: "tr", label: "Türkçe" },
 
]

export interface LanguageFilterSelectProps {
  value: LanguageFilterValue
  onChange: (value: LanguageFilterValue) => void
  disabled?: boolean
  id?: string
  ariaLabel?: string
  className?: string
}

export function LanguageFilterSelect({
  value,
  onChange,
  disabled = false,
  id = "language-filter-select",
  ariaLabel = "Filter by language",
  className,
}: LanguageFilterSelectProps) {
  return (
    <div className={className ?? "relative min-w-[160px]"}>
      <Filter
        className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none"
        aria-hidden="true"
      />
      <select
        id={id}
        value={value}
        onChange={(e) => onChange(e.target.value as LanguageFilterValue)}
        disabled={disabled}
        aria-label={ariaLabel}
        className="w-full appearance-none bg-card border border-border rounded-xl pl-9 pr-9 py-2.5 text-xs font-semibold font-sans text-foreground outline-none transition-colors cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673]"
      >
        {FILTER_OPTIONS.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      <ChevronDown
        className="absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none"
        aria-hidden="true"
      />
    </div>
  )
}