Aviso de incidente.

<aside class="ui-sample ui-feedback" data-incident-banner="true" data-severity="info" role="status"><strong>Mantenimiento programado</strong><p>El 27 ago de 02:00 a 02:20 CLT habrá una pausa de publicación.</p><a class="btn btn--quiet" href="#estado">Ver estado y actualizaciones</a><time>Actualizado 18:24 CLT</time></aside>

<aside class="ui-sample ui-feedback border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-incident-banner="true" data-severity="info" role="status"><strong>Mantenimiento programado</strong><p>El 27 ago de 02:00 a 02:20 CLT habrá una pausa de publicación.</p><a class="btn btn--quiet underline underline-offset-4" href="#estado">Ver estado y actualizaciones</a><time>Actualizado 18:24 CLT</time></aside>

export interface IncidentBannerProps {
  /** Tipo de aviso: «Mantenimiento programado», «Incidente activo», «Servicio restablecido». */
  title?: string;
  /** Qué ocurre, cuándo y qué sigue disponible; vacío omite el párrafo. */
  description?: string;
  /** Destino de la página de estado o del incidente; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace; vacío oculta el enlace. */
  linkLabel?: string;
  /** Texto visible de la última actualización dentro de `<time>`, con hora y zona horaria; vacío lo oculta. */
  time?: string;
  /** Momento de la última actualización en ISO 8601 con zona horaria (atributo `dateTime`). */
  dateTime?: string;
  /** Gravedad del aviso (`data-severity`), que da el tono del borde y del título; por defecto se deduce de `title` (mantenimiento: `info`; incidente: `warning`; interrupción o caída: `error`; restablecido o resuelto: `success`; otro: `info`). */
  severity?: "info" | "warning" | "error" | "success";
  className?: string;
}

const INCIDENT_BANNER_GRAVEDAD: [string, "info" | "warning" | "error" | "success"][] = [
  ["mantenimiento", "info"],
  ["incidente", "warning"],
  ["interrupción", "error"],
  ["caída", "error"],
  ["servicio restablecido", "success"],
  ["restablecido", "success"],
  ["resuelto", "success"],
];

/**
 * Banda de aviso sobre un mantenimiento programado o un incidente en curso, con su efecto, un enlace a la página de estado y la hora de la última actualización.
 *
 * Usa `role="status"`. Di qué deja de funcionar y qué sigue disponible; `dateTime` conserva el momento exacto de la actualización. El tipo de aviso va en el título; `severity` sólo refuerza el tono. El enlace a la página de estado es una acción terciaria (`btn--quiet`).
 *
 * @example <IncidentBanner title="Mantenimiento programado" description="El 27 ago de 02:00 a 02:20 CLT habrá una pausa de publicación." href="/estado" />
 * @example <IncidentBanner title="Incidente activo" description="La generación de PDF tarda más de lo habitual. Los documentos ya publicados siguen disponibles." time="Actualizado 18:24 CLT" dateTime="2026-08-25T18:24:00-04:00" />
 */
export function IncidentBanner({
  title = "Mantenimiento programado",
  description = "El 27 ago de 02:00 a 02:20 CLT habrá una pausa de publicación.",
  href = "#estado",
  linkLabel = "Ver estado y actualizaciones",
  time = "Actualizado 18:24 CLT",
  dateTime,
  severity,
  className,
}: IncidentBannerProps) {
  const texto = title.toLowerCase();
  const gravedad = severity ?? INCIDENT_BANNER_GRAVEDAD.find(([clave]) => texto.startsWith(clave))?.[1] ?? "info";
  return (
    <aside className={["ui-feedback", className].filter(Boolean).join(" ")} data-incident-banner data-severity={gravedad} role="status">
      <strong>{title}</strong>
      {description ? <p>{description}</p> : null}
      {href && linkLabel ? <a className="btn btn--quiet" href={href}>{linkLabel}</a> : null}
      {time ? <time dateTime={dateTime}>{time}</time> : null}
    </aside>
  );
}