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

import { InfoCircleIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import styles from "./error.module.css"

import type { ErrorMessageProps } from "./errorMessage"

export default function ErrorMessage<T>({
  errors,
  name,
}: ErrorMessageProps<T>) {
  return (
    <RHFErrorMessage
      errors={errors}
      name={name}
      render={({ message }) => (
        <Caption className={styles.message} fontOnly>
          <InfoCircleIcon color="red" />
          {message}
        </Caption>
      )}
    />
  )
}