export type DateRangeValue = {
  from?: string;
  to?: string;
};

export default function DateRange({
  from,
  to,
  onFromChange,
  onToChange
}: {
  from?: string;
  to?: string;
  onFromChange: (value: string) => void;
  onToChange: (value: string) => void;
}) {
  return (
    <div className="d-flex gap-2">
      <label className="flex-fill">
        <span className="form-label">From</span>
        <input
          type="datetime-local"
          className="form-control"
          value={from ?? ""}
          onChange={(event) => onFromChange(event.target.value)}
        />
      </label>
      <label className="flex-fill">
        <span className="form-label">To</span>
        <input
          type="datetime-local"
          className="form-control"
          value={to ?? ""}
          onChange={(event) => onToChange(event.target.value)}
        />
      </label>
    </div>
  );
}