import React from "react";
import { useFormContext } from "react-hook-form";
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/shared/ui/form";
import { Textarea, TextareaProps } from "@/shared/ui/textarea";
import { useTranslations } from "next-intl";

interface FormTextareaProps extends TextareaProps {
  label?: React.ReactNode | string;
  name: string;
  placeholder?: any;
  showRequired?: any;
  CustomChilderen?: React.ReactNode;
  className?: string;
}

const FormTextarea: React.FC<FormTextareaProps> = ({
  name,
  label,
  showRequired = true,
  CustomChilderen,
  className,
  ...props
}) => {
  const form = useFormContext();
  const t = useTranslations("LABELS");
  const {
    formState: { errors },
  } = form;
  return (
    <FormField
      control={form.control}
      name={name}
      render={({ field }) => (
        <FormItem>
          <div className="flex items-center gap-2">
            {label && (
              <FormLabel className=" text-text-primary font-medium text-sm leading-6 px-4 ">
                {typeof label === "string" ? t(label) : label}
                {showRequired && (
                  <span className="text-error mx-1 text-lg translate-y-1 inline-block">
                    *
                  </span>
                )}
              </FormLabel>
            )}
          </div>
          <FormControl>
            <Textarea
              CustomChilderen={CustomChilderen}
              error={errors[name]}
              className={`md:h-[125px] w-full border-2 border-[#F3F6FC] outline-0 bg-[#fff] placeholder:text-[#2d2d2db2] placeholder:font-normal placeholder:font-sm rounded-xl  pe-5 ${className}`}
              {...field}
              {...props}
            />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  );
};

export default FormTextarea;