Alerta informativa.

<section class="ui-sample ui-feedback" role="status" data-severity="info"><span class="badge">Aviso</span> <strong>Nueva versión disponible</strong><p>Puedes revisar los cambios antes de actualizar.</p><a class="btn btn--quiet" href="#detalle">Ver detalle</a></section>

<section class="ui-sample ui-feedback border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" role="status" data-severity="info"><span class="badge">Aviso</span> <strong>Nueva versión disponible</strong><p>Puedes revisar los cambios antes de actualizar.</p><a class="btn btn--quiet underline underline-offset-4" href="#detalle">Ver detalle</a></section>

export interface AlertInfoProps {
  /** Título del aviso; vacío omite el título. */
  title?: string;
  /** Texto del aviso; vacío omite el párrafo. */
  description?: string;
  /** Texto del enlace al detalle; vacío oculta el enlace. */
  linkLabel?: string;
  /** Destino del enlace al detalle; vacío oculta el enlace. */
  href?: string;
  /** Texto de la insignia que dice la gravedad antes del título («Aviso»); vacío la oculta. */
  severityLabel?: string;
  className?: string;
}

/**
 * Alerta informativa dentro de la página, para avisar de un cambio o una novedad que no bloquea el trabajo.
 *
 * Usa `role="status"`: el lector de pantalla la anuncia sin interrumpir. Para un problema que exige atención, usa `AlertWarning` o `AlertError`. La insignia de `severityLabel` dice la gravedad en texto, sin depender del color.
 *
 * @example <AlertInfo title="Nueva versión disponible" description="Puedes revisar los cambios antes de actualizar." href="/cambios" />
 * @example <AlertInfo title="Mantenimiento programado" description="El servicio se detendrá el sábado entre 02:00 y 03:00 CLT." linkLabel="Ver estado del servicio" href="/estado" />
 */
export function AlertInfo({
  title = "Nueva versión disponible",
  description = "Puedes revisar los cambios antes de actualizar.",
  linkLabel = "Ver detalle",
  href = "#detalle",
  severityLabel = "Aviso",
  className,
}: AlertInfoProps) {
  return (
    <section className={["ui-feedback", className].filter(Boolean).join(" ")} role="status" data-severity="info">
      {severityLabel ? <span className="badge">{severityLabel}</span> : null}
      {severityLabel && title ? " " : null}
      {title ? <strong>{title}</strong> : null}
      {description ? <p>{description}</p> : null}
      {linkLabel && href ? <a className="btn btn--quiet" href={href}>{linkLabel}</a> : null}
    </section>
  );
}