Alerta de error.

<section class="ui-sample ui-feedback" role="alert" data-severity="error"><span class="badge badge--err">Error</span> <strong>No se guardaron los cambios</strong><p>Otra persona guardó una versión más reciente. Revisa las diferencias y vuelve a guardar.</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="alert" data-severity="error"><span class="badge badge--err">Error</span> <strong>No se guardaron los cambios</strong><p>Otra persona guardó una versión más reciente. Revisa las diferencias y vuelve a guardar.</p><a class="btn btn--quiet underline underline-offset-4" href="#detalle">Ver detalle</a></section>

export interface AlertErrorProps {
  /** Título del error; vacío omite el título. */
  title?: string;
  /** Qué pasó y cómo corregirlo; 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 («Error»); vacío la oculta. */
  severityLabel?: string;
  className?: string;
}

/**
 * Alerta de error dentro de la página, para una acción que falló; dice qué pasó y cómo corregirlo.
 *
 * Usa `role="alert"`: el lector de pantalla la anuncia de inmediato. La insignia de `severityLabel` dice la gravedad en texto, sin depender del color.
 *
 * @example <AlertError title="No se guardaron los cambios" description="Otra persona guardó una versión más reciente. Revisa las diferencias y vuelve a guardar." href="/conflictos" />
 * @example <AlertError title="No se pudo publicar" description="El archivo supera los 20 MB. Reduce su tamaño y vuelve a subirlo." linkLabel="Ver requisitos" href="/ayuda/archivos" />
 */
export function AlertError({
  title = "No se guardaron los cambios",
  description = "Otra persona guardó una versión más reciente. Revisa las diferencias y vuelve a guardar.",
  linkLabel = "Ver detalle",
  href = "#detalle",
  severityLabel = "Error",
  className,
}: AlertErrorProps) {
  return (
    <section className={["ui-feedback", className].filter(Boolean).join(" ")} role="alert" data-severity="error">
      {severityLabel ? <span className="badge badge--err">{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>
  );
}