import React from "react";
import { FormTextareaField } from "@arcteryx/components-form";
import { useTranslation } from "react-i18next";

const FsTextarea = ({ id, label, name, required, errors, register, watch }) => {
  const { t } = useTranslation("components-formstack");
  const [currentValue] = watch([name]);
  const error = errors[name];
  const valid = error === undefined && currentValue;

  return (
    <FormTextareaField
      id={id}
      label={label}
      required={required}
      error={errors[name]}
      valid={valid}
      {...register(name, {
        required: required && t("This field is required."),
      })}
    />
  );
};

export default FsTextarea;