import { useTranslations } from 'next-intl'
import { type ComponentProps } from 'react'
import { type FieldError } from 'react-hook-form'

import { Typography } from '../../Typography'

const { Text } = Typography

type FormMessageProps = ComponentProps<'p'> & {
	error?: FieldError
}

function FormMessage({ error, ...props }: FormMessageProps) {
	const te = useTranslations('errors')
	//
	const body = error ? te(String(error?.message ?? '')) : props.children

	if (!body) {
		return null
	}

	return (
		<Text size={'sm'} className='text-danger!'>
			{body}
		</Text>
	)
}

export { FormMessage }
