import { Label } from '@/components/ui/label';
import { MonthYearPicker } from '@/components/ui/month-year-picker';

interface FilterDateRangePickerProps {
  label: string;
  fromDate: Date | null;
  toDate: Date | null;
  onFromChange: (date: Date | undefined) => void;
  onToChange: (date: Date | undefined) => void;
  fromYear?: number;
  toYear?: number;
  fromPlaceholder?: string;
  toPlaceholder?: string;
}

export function FilterDateRangePicker({
  label,
  fromDate,
  toDate,
  onFromChange,
  onToChange,
  fromYear = 1900,
  toYear = new Date().getFullYear(),
  fromPlaceholder = 'From',
  toPlaceholder = 'To'
}: FilterDateRangePickerProps) {
  return (
    <div className="space-y-2">
      <Label>{label}</Label>
      <div className="flex gap-2">
        <MonthYearPicker
          date={fromDate || undefined}
          onSelect={onFromChange}
          placeholder={fromPlaceholder}
          fromYear={fromYear}
          toYear={toYear}
        />
        <MonthYearPicker
          date={toDate || undefined}
          onSelect={onToChange}
          placeholder={toPlaceholder}
          fromYear={fromYear}
          toYear={toYear}
        />
      </div>
    </div>
  );
}
