Anexos.

<section class="ui-sample ui-document" data-annex-list="true"><h3>Anexos</h3><ol><li><a href="#anexo-a">Anexo A · Tratamiento de datos</a> <span>PDF · 84 KB</span></li><li><a href="#anexo-b">Anexo B · Niveles de servicio</a> <span>PDF · 62 KB</span></li></ol></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-annex-list="true"><h3>Anexos</h3><ol class="grid gap-2"><li><a class="underline underline-offset-4" href="#anexo-a">Anexo A · Tratamiento de datos</a> <span>PDF · 84 KB</span></li><li><a class="underline underline-offset-4" href="#anexo-b">Anexo B · Niveles de servicio</a> <span>PDF · 62 KB</span></li></ol></section>

export interface AnnexListItem {
  /** Nombre del anexo con su letra («Anexo A · Tratamiento de datos»). */
  label: string;
  /** Destino del anexo. */
  href: string;
  /** Formato y tamaño («PDF · 84 KB»); vacío lo oculta. */
  detail?: string;
  /** Estado del anexo cuando no está vigente («Reemplazado en v4», «Pendiente de firma»); se muestra como etiqueta y vacío la oculta. */
  status?: string;
  /** Tono de la etiqueta de estado; por defecto se deduce del texto (reemplazado o pendiente: `warn`; anulado: `err`; vigente: `ok`). */
  statusTone?: "ok" | "warn" | "err" | "neutral";
}

export interface AnnexListProps {
  title?: string;
  /** Anexos en el orden en que el documento los cita. */
  items?: AnnexListItem[];
  className?: string;
}

const ANNEX_LIST_ITEMS: AnnexListItem[] = [
  { label: "Anexo A · Tratamiento de datos", href: "#anexo-a", detail: "PDF · 84 KB" },
  { label: "Anexo B · Niveles de servicio", href: "#anexo-b", detail: "PDF · 62 KB" },
];

const ANNEX_LIST_TONOS: [string, "ok" | "warn" | "err"][] = [
  ["vigente", "ok"],
  ["reemplazado", "warn"],
  ["pendiente", "warn"],
  ["anulado", "err"],
  ["retirado", "err"],
];

function claseEstado(status: string, tone?: "ok" | "warn" | "err" | "neutral") {
  const texto = status.toLowerCase();
  const tono = tone ?? ANNEX_LIST_TONOS.find(([clave]) => texto.startsWith(clave))?.[1] ?? "neutral";
  return tono === "neutral" ? "badge" : `badge badge--${tono}`;
}

/**
 * Lista ordenada de los anexos de un documento, con enlace a cada uno, su formato y tamaño, y una etiqueta de estado cuando el anexo no está vigente; va al final del cuerpo del documento.
 *
 * El estado va en texto dentro de una etiqueta con tono (`badge`), no sólo en color.
 *
 * @example <AnnexList items={[{ label: "Anexo A · Tratamiento de datos", href: "/anexos/a.pdf", detail: "PDF · 84 KB" }]} />
 * @example <AnnexList items={[{ label: "Anexo A · Tratamiento de datos", href: "#anexo-a", detail: "PDF · 84 KB" }, { label: "Anexo B · Niveles de servicio", href: "#anexo-b", detail: "PDF · 62 KB", status: "Reemplazado en v4" }]} />
 */
export function AnnexList({ title = "Anexos", items = ANNEX_LIST_ITEMS, className }: AnnexListProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-annex-list>
      <h3>{title}</h3>
      {items.length ? (
        <ol>
          {items.map((item, i) => (
            <li key={`${item.href}-${i}`}>
              <a href={item.href}>{item.label}</a>
              {item.detail ? " " : null}
              {item.detail ? <span>{item.detail}</span> : null}
              {item.status ? " " : null}
              {item.status ? <span className={claseEstado(item.status, item.statusTone)}>{item.status}</span> : null}
            </li>
          ))}
        </ol>
      ) : null}
    </section>
  );
}