import { Label, Textarea as TextareaField } from "flowbite-react";
import { FC } from "react";
import { useFormContext } from "react-hook-form";

type Props = {
  labelText: string;
  name: string;
  errors?: any;
  labelCls?: string;
  placeholder?: string;
  rows?: number;
  cols?: number;
};

export const Textarea: FC<Props> = ({
  labelText,
  name,
  errors,
  labelCls,
  placeholder = "",
  rows = 6,
  cols = 10,
  ...props
}) => {
  const { register } = useFormContext();

  return (
    <>
      <div className="textarea">
        <div className={`mb-2 block ${labelCls}`}>
          <Label htmlFor="email4" value={labelText} />
        </div>
        <TextareaField
          rows={rows}
          cols={cols}
          placeholder={placeholder}
          {...register(name)}
          {...props}
          helperText={
            errors && (
              <>
                <span className="text-red-500">{errors?.[name]?.message}</span>
              </>
            )
          }
        />
      </div>
    </>
  );
};