import { Calendar as CalendarIcon } from 'lucide-react'
import { cn } from '@/lib/utils'

type YearSelectorProps = {
    years: number[]
    selectedYear: number
    onYearChange: (year: number) => void
    className?: string
}

export function YearSelector({
    years,
    selectedYear,
    onYearChange,
    className
}: YearSelectorProps) {
    return (
        <div className={cn('flex flex-wrap items-center justify-center gap-4', className)}>
            <label className="text-sm font-medium text-gray-700 flex items-center gap-2">
                <CalendarIcon className="w-4 h-4 text-gray-500" />
                انتخاب سال:
            </label>
            <select
                className="px-4 py-2 border border-gray-200 rounded-lg focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 transition-all duration-150 bg-white font-medium"
                value={selectedYear}
                onChange={(e) => onYearChange(Number(e.target.value))}
            >
                {years.map((year) => (
                    <option key={year} value={year}>
                        {year}
                    </option>
                ))}
            </select>
        </div>
    )
}