"use client"

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/app/_components/ui/select"

interface YearSelectorProps {
    years: string[]
    selectedYear: string
    onChange: (year: string) => void
}

export default function YearSelector({ years, selectedYear, onChange }: YearSelectorProps) {
    return (
        <div className="flex items-center space-x-2">
            <span className="text-sm font-medium">Year:</span>
            <Select value={selectedYear} onValueChange={onChange}>
                <SelectTrigger className="h-8 w-[100px]">
                    <SelectValue placeholder="Select Year" />
                </SelectTrigger>
                <SelectContent>
                    {years.map((year) => (
                      <SelectItem key={year} value={year}>
                          {year}
                      </SelectItem>
                  ))}
                </SelectContent>
            </Select>
        </div>
    )
}