import React, { type ReactElement } from 'react'
import { type FieldError } from 'react-hook-form'

type ErrorMessages = Record<string, string>
export default function InputError ({ fieldError, errorMessages }: { fieldError?: FieldError, errorMessages?: ErrorMessages }): ReactElement {
  if (fieldError === undefined) return <></>
  const defaultErrorMessages: ErrorMessages = {
    required: 'This field is required.'
  }
  const message = errorMessages?.[fieldError.type] ?? defaultErrorMessages[fieldError.type] ?? 'This input is invalid'
  return (
    <div className='text-red-700 text-xs'>
      {message}
    </div>
  )
}
