Advertencia.

<section class="ui-sample ui-feedback" role="alert" data-severity="warning"><span class="badge badge--warn">Advertencia</span> <strong>Cobertura parcial</strong><p>Falta la Región de Aysén en este corte.</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="warning"><span class="badge badge--warn">Advertencia</span> <strong>Cobertura parcial</strong><p>Falta la Región de Aysén en este corte.</p><a class="btn btn--quiet underline underline-offset-4" href="#detalle">Ver detalle</a></section>

export interface AlertWarningProps {
  /** 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 («Advertencia»); vacío la oculta. */
  severityLabel?: string;
  className?: string;
}

/**
 * Advertencia dentro de la página, para datos incompletos o una condición que conviene revisar antes de seguir.
 *
 * Usa `role="alert"`: el lector de pantalla la anuncia de inmediato. Para un aviso sin urgencia, usa `AlertInfo`. La insignia de `severityLabel` dice la gravedad en texto, sin depender del color.
 *
 * @example <AlertWarning title="Cobertura parcial" description="Falta la Región de Aysén en este corte." href="/cobertura" />
 * @example <AlertWarning title="Datos provisorios" description="El INE publicará la cifra definitiva en marzo." linkLabel="" />
 */
export function AlertWarning({
  title = "Cobertura parcial",
  description = "Falta la Región de Aysén en este corte.",
  linkLabel = "Ver detalle",
  href = "#detalle",
  severityLabel = "Advertencia",
  className,
}: AlertWarningProps) {
  return (
    <section className={["ui-feedback", className].filter(Boolean).join(" ")} role="alert" data-severity="warning">
      {severityLabel ? <span className="badge badge--warn">{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>
  );
}