import { Label, TextInput } from "flowbite-react";
import { FC, useId } from "react";
import { useFormContext } from "react-hook-form";

type Props = {
  labelText?: string;
  name: string;
  inputType?: string;
  errors?: any;
  labelCls?: string;
  placeholder?: string;
  mandatory?: boolean;
};

export const InputField: FC<Props> = ({
  labelText,
  name,
  inputType = "text",
  errors,
  labelCls,
  placeholder = "",
  mandatory = false,
  ...props
}) => {
  const { register } = useFormContext();
  const id = useId();

  return (
    <>
      <div className="w-full">
        <div className={`mb-2 block ${labelCls}`}>
          <Label htmlFor={id} value={labelText} />
          {mandatory && <span className="text-red-500">*</span>}
        </div>
        <TextInput
          id={id}
          type={inputType}
          placeholder={placeholder}
          {...register(name, {
            valueAsNumber: inputType === "number" ? true : false,
          })}
          {...props}
          helperText={
            errors && (
              <>
                <span className="text-red-500">{errors?.[name]?.message}</span>
              </>
            )
          }
        />
      </div>
    </>
  );
};