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

interface InternalNotesFieldProps {
  form: UseFormReturn<StepFormData>;
}

export function InternalNotesField({ form }: InternalNotesFieldProps) {
  return (
    <FormField
      control={form.control}
      name="internalNotes"
      render={({ field }) => (
        <FormItem className="bg-gray-50 border border-gray-200 rounded-md p-3">
          <FormLabel className="flex items-center gap-2">
            <span className="text-amber-600">📝</span>
            <span>Notes internes (non visibles par le voyageur)</span>
          </FormLabel>
          <FormControl>
            <Textarea
              placeholder="Notes privées pour l'organisation..."
              className="min-h-[80px] bg-white"
              {...field}
              value={field.value || ""}
            />
          </FormControl>
          <div className="text-xs text-gray-500 mt-1">
            Ces notes ne seront pas visibles par le voyageur, seulement par les organisateurs.
          </div>
          <FormMessage />
        </FormItem>
      )}
    />
  );
}