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

export interface FormInputProps extends InputProps {
  label?: React.ReactNode | string;
  showRequired?: any;
  name: string;
}

const FormInput: React.FC<FormInputProps> = ({
  name,
  label,
  showRequired = true,
  ...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>
            <Input
              error={errors[name]}
              className="h-12 placeholder:text-[#2d2d2db2] placeholder:font-normal placeholder:font-sm focus:border-primaryy bg-white outline-0	border border-[#F3F6FC] rounded-xl pe-5"
              {...field}
              {...props}
            />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  );
};

export default FormInput;