import { cn } from '@/lib/utils'

interface Props {
  id: string
  message?: string
  className?: string
}

/**
 * Error de validación pegado a su campo (RT-08).
 *
 * Nunca en un aviso flotante: quien está completando un formulario necesita
 * saber **dónde** corregir, y un mensaje que aparece arriba y se desvanece
 * obliga a recorrer los campos adivinando.
 *
 * Se enlaza con `aria-describedby` desde el campo, así que un lector de pantalla
 * lo anuncia al enfocarlo y no sólo al llegar a este párrafo.
 */
export function FieldError({ id, message, className }: Props) {
  if (!message) return null

  return (
    <p id={id} role="alert" className={cn('text-destructive text-sm', className)}>
      {message}
    </p>
  )
}

/** Atributos que un campo con error tiene que llevar para quedar bien anunciado. */
export function fieldErrorProps(id: string, message?: string) {
  return message
    ? { 'aria-invalid': true as const, 'aria-describedby': id }
    : {}
}