import { ErrorMessage as RHFErrorMessage } from "@hookform/error-message"
import { useIntl } from "react-intl"

import { getErrorMessage } from "../Input/errors"
import Error from "./Error"

import type { ErrorMessageProps } from "./errorMessage"

export default function ErrorMessage<T>({
  errors,
  name,
}: ErrorMessageProps<T>) {
  const intl = useIntl()
  return (
    <RHFErrorMessage
      errors={errors}
      name={name}
      render={({ message }) => <Error>{getErrorMessage(intl, message)}</Error>}
    />
  )
}