import type * as React from 'react'
import { cn } from '../../utils/cn'
import { typographyVariants } from '../Typography'

export type ErrorMessageProps = React.HTMLAttributes<HTMLDivElement> & {
  ref?: React.Ref<HTMLDivElement>
}

const ErrorMessage = ({ className, ref, ...props }: ErrorMessageProps) => (
  <div
    ref={ref}
    className={cn(
      typographyVariants({ variant: 'body-semi-xs', color: 'error' }),
      className,
    )}
    {...props}
  />
)
ErrorMessage.displayName = 'ErrorMessage'

export { ErrorMessage }