import { Card, Input } from "../../../components/ui";
import { useI18n } from "../../../i18n/I18nContext";
import { fromDatetimeLocalValue, toDatetimeLocalValue } from "../../../lib/time";
import type { WizardDraft } from "../wizardState";

type Props = {
  draft: WizardDraft;
  onChange: (partial: Partial<WizardDraft>) => void;
};

export function ScheduleStep({ draft, onChange }: Props) {
  const { t } = useI18n();
  return (
    <Card title={t("wizard.schedule.title")}>
      <div className="hb-stack">
        <Input
          label={t("wizard.schedule.start")}
          type="datetime-local"
          value={toDatetimeLocalValue(draft.schedule_start_at)}
          onChange={(e) => onChange({ schedule_start_at: fromDatetimeLocalValue(e.target.value) })}
        />
        <Input
          label={t("wizard.schedule.interval")}
          type="number"
          min={0}
          value={String(draft.interval_minutes)}
          onChange={(e) => onChange({ interval_minutes: Math.max(0, Number(e.target.value) || 0) })}
          hint={t("wizard.schedule.intervalHint")}
        />
      </div>
    </Card>
  );
}
