"use client";

import {
    FormControl,
    FormDescription,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
import type { Control, Path } from "react-hook-form";

const TextareaField = <TFieldValues extends Record<string, string>>({
    control,
    name,
    label,
    description,
    ...props
}: {
    control: Control<TFieldValues>;
    name: Path<TFieldValues>;
    label: string;
    description?: string;
} & React.ComponentProps<typeof Textarea>) => {
    return (
        <FormField
            control={control}
            name={name}
            render={({ field }) => {
                if (!field) {
                    console.error("Field is missing for InputField", name);
                    return <></>;
                }
                return (
                    <FormItem>
                        <FormLabel>{label}</FormLabel>
                        <FormControl>
                            <Textarea
                                className="resize-none"
                                {...field}
                                {...props}
                            />
                        </FormControl>
                        {description && <FormDescription>{description}</FormDescription>}
                        <FormMessage className="sm:hidden text-xs text-left"/>
                    </FormItem>
                );
            }}
        />
    )
};

export default TextareaField;