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

interface BasicTripInfoSectionProps {
  form: UseFormReturn<TripFormData>;
}

export function BasicTripInfoSection({ form }: BasicTripInfoSectionProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      <FormField
        control={form.control}
        name="title"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Titre du voyage</FormLabel>
            <FormControl>
              <Input placeholder="Mon voyage à Paris" {...field} />
            </FormControl>
            <FormDescription>Choisissez un nom facile à reconnaître, par exemple « Séjour à Paris ».</FormDescription>
            <FormMessage />
          </FormItem>
        )}
      />

      <FormField
        control={form.control}
        name="destination"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Destination</FormLabel>
            <FormControl>
              <Input placeholder="Paris, France" {...field} />
            </FormControl>
            <FormDescription>Indiquez la ville ou la région principale du séjour.</FormDescription>
            <FormMessage />
          </FormItem>
        )}
      />
    </div>
  );
}