import React from "react";
import { UseFormReturn } from "react-hook-form";
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { StepFormData } from "../schemas/stepSchema";
import { Textarea } from "@/components/ui/textarea";
import { getStepTypeById } from "@/types/stepTypes";
import { Card } from "@/components/ui/card";

interface OtherFieldsProps {
  form: UseFormReturn<StepFormData>;
}

export function OtherFields({ form }: OtherFieldsProps) {
  // Get the current step type
  const stepType = form.watch("stepType") || "activity";
  const stepTypeInfo = getStepTypeById(stepType);
  const { light: bgColor, accent: accentColor } = stepTypeInfo.colors;

  return (
    <Card className="space-y-4 p-4" style={{ backgroundColor: `${bgColor}40` }}>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <FormField
          control={form.control}
          name="time"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Heure</FormLabel>
              <FormControl>
                <Input type="time" {...field} className="bg-white" />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="estimatedDuration"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Durée estimée</FormLabel>
              <FormControl>
                <Input placeholder="Ex: 1h30" {...field} value={field.value || ""} className="bg-white" />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </div>

      <FormField
        control={form.control}
        name="description"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Description</FormLabel>
            <FormControl>
              <Textarea
                placeholder="Détails sur cette étape..."
                className="min-h-[100px] bg-white"
                {...field}
                value={field.value || ""}
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </Card>
  );
}