import { Select } from "@/components/ui/select";

type FilterItem = {
  key: string;
  label: string;
  value: string;
  options: Array<{ value: string; label: string }>;
};

export function FilterBar({
  filters,
  onChange,
}: {
  filters: FilterItem[];
  onChange: (key: string, value: string) => void;
}) {
  return (
    <div className="grid grid-cols-1 gap-2 md:grid-cols-3 lg:grid-cols-4">
      {filters.map((filter) => (
        <div key={filter.key}>
          <label className="mb-1 block text-xs font-bold text-slate-500">{filter.label}</label>
          <Select value={filter.value} onChange={(e) => onChange(filter.key, e.target.value)}>
            {filter.options.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </Select>
        </div>
      ))}
    </div>
  );
}