import type { ReactNode } from 'react'

export type AlertTone = 'error' | 'success' | 'info'

const toneClasses: Record<AlertTone, string> = {
  error: 'alert alert-error',
  success: 'alert alert-success',
  info: 'alert alert-info',
}

export interface AlertProps {
  tone?: AlertTone
  children: ReactNode
}

/** Inline form-level feedback banner. */
export function Alert({ tone = 'error', children }: AlertProps) {
  return (
    <p
      role={tone === 'error' ? 'alert' : 'status'}
      className={`w-full rounded-field px-3.5 py-2.5 font-sans text-[12.5px] leading-[1.5] ${toneClasses[tone]}`}
    >
      {children}
    </p>
  )
}