import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { UseFormReturn } from "react-hook-form";
import { z } from "zod";
import { stepSchema } from "../schemas/stepSchema";

type StepFormData = z.infer<typeof stepSchema>;

interface StepTimeFieldProps {
  form: UseFormReturn<StepFormData>;
}

export function StepTimeField({ form }: StepTimeFieldProps) {
  // Toujours utiliser startTime/endTime pour tous les types d'étapes
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
      <FormField
        control={form.control}
        name="startTime"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Heure de début</FormLabel>
            <FormControl>
              <Input
                type="time"
                {...field}
                onChange={(e) => {
                  field.onChange(e);
                  // Synchroniser le champ time pour la compatibilité avec ancien code
                  form.setValue("time", e.target.value);
                }}
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
      <FormField
        control={form.control}
        name="endTime"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Heure de fin</FormLabel>
            <FormControl>
              <Input type="time" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </div>
  );
}