import { Input } from "./input";
import { Label } from "./label";

interface DateRangePickerProps {
  from: string;
  to: string;
  onChange: (range: { from: string; to: string }) => void;
}

/** Two native date inputs for filtering by range (dashboard, participants). */
export function DateRangePicker({ from, to, onChange }: DateRangePickerProps) {
  return (
    <div className="flex flex-wrap items-end gap-3">
      <div className="min-w-0 flex-1 basis-32 flex flex-col gap-1.5">
        <Label htmlFor="date-from" className="text-xs font-medium text-(--color-ink-muted)">From</Label>
        <Input
          id="date-from"
          type="date"
          value={from}
          onChange={(e) => onChange({ from: e.target.value, to })}
          className="cursor-pointer"
        />
      </div>
      <div className="min-w-0 flex-1 basis-32 flex flex-col gap-1.5">
        <Label htmlFor="date-to" className="text-xs font-medium text-(--color-ink-muted)">To</Label>
        <Input
          id="date-to"
          type="date"
          value={to}
          onChange={(e) => onChange({ from, to: e.target.value })}
          className="cursor-pointer"
        />
      </div>
    </div>
  );
}