import * as React from 'react'
import { cn } from '../lib/cn'

export interface FormErrorProps extends React.HTMLAttributes<HTMLParagraphElement> {
  /** Stable id so an input's aria-describedby can point at it. */
  id: string
}

/**
 * Error message. `role="alert"` so screen readers announce it immediately; the
 * matching `id` is the target of the input's aria-describedby. State is conveyed
 * by text (not color alone).
 */
export const FormError = React.forwardRef<HTMLParagraphElement, FormErrorProps>(
  ({ className, children, ...props }, ref) => (
    <p ref={ref} role="alert" className={cn('text-danger text-body-2 mt-2', className)} {...props}>
      {children}
    </p>
  ),
)
FormError.displayName = 'FormError'