import { Textarea } from "@/components/ui/textarea";
import { Label } from "../../../components/ui/label";
import { useFieldContext } from "..";
import { FieldErrors } from "./FieldErrors";

type InputFieldProps = {
	label: string;
	placeHolder: string;
	required: boolean;
};
export const TextArea = ({ label, placeHolder, required }: InputFieldProps) => {
	const field = useFieldContext<any>();

	return (
		<div className="grid gap-3 w-64">
			<Label htmlFor={field.name}>{label}</Label>
			<Textarea
				id={field.name}
				value={field.state.value}
				onChange={(e) => field.handleChange(e.target.value)}
				placeholder={placeHolder}
				onBlur={field.handleBlur}
				required={required}
			/>
			<FieldErrors meta={field.state.meta} />
		</div>
	);
};