Recibo de auditoría.

<article class="ui-sample ui-service" data-audit-receipt="true"><header><strong>Recibo de auditoría</strong><code>AUD-2026-184</code></header><dl><div><dt>Objeto</dt><dd>Censo 2024 · tabla comunal v3</dd></div><div><dt>Resultado</dt><dd><span class="badge badge--ok">19 pruebas aprobadas</span></dd></div><div><dt>Digest</dt><dd><code>498f99c6…</code></dd></div><div><dt>Emitido</dt><dd>18:38 CLT</dd></div></dl><a class="btn btn--secondary" href="#json">Descargar JSON</a></article>

<article class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-audit-receipt="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Recibo de auditoría</strong><code>AUD-2026-184</code></header><dl class="grid gap-2"><div><dt>Objeto</dt><dd>Censo 2024 · tabla comunal v3</dd></div><div><dt>Resultado</dt><dd><span class="badge badge--ok">19 pruebas aprobadas</span></dd></div><div><dt>Digest</dt><dd><code>498f99c6…</code></dd></div><div><dt>Emitido</dt><dd>18:38 CLT</dd></div></dl><a class="btn btn--secondary underline underline-offset-4" href="#json">Descargar JSON</a></article>

export interface AuditReceiptItem {
  /** Nombre del dato (`<dt>`). */
  label: string;
  value: string;
  /** Muestra el valor en `<code>`, para digests o identificadores que se copian tal cual. */
  monospace?: boolean;
  /** Muestra el valor como etiqueta con tono (`badge`), para el resultado de la revisión: `ok` aprobada, `warn` con observaciones, `err` rechazada, `neutral` sin tono. Tiene prioridad sobre `monospace`. */
  tone?: "ok" | "warn" | "err" | "neutral";
}

export interface AuditReceiptProps {
  title?: string;
  /** Identificador del recibo, junto al título; vacío lo oculta. */
  receiptId?: string;
  /** Datos del recibo: objeto auditado, resultado, digest y fecha de emisión. */
  items?: AuditReceiptItem[];
  /** URL de descarga del recibo. */
  href?: string;
  /** Texto del enlace de descarga; vacío lo oculta. */
  linkLabel?: string;
  className?: string;
}

const ITEMS: AuditReceiptItem[] = [
  { label: "Objeto", value: "Censo 2024 · tabla comunal v3" },
  { label: "Resultado", value: "19 pruebas aprobadas", tone: "ok" },
  { label: "Digest", value: "498f99c6…", monospace: true },
  { label: "Emitido", value: "18:38 CLT" },
];

function AuditReceiptValor({ item }: { item: AuditReceiptItem }) {
  if (item.tone) return <span className={item.tone === "neutral" ? "badge" : `badge badge--${item.tone}`}>{item.value}</span>;
  return item.monospace ? <code>{item.value}</code> : <>{item.value}</>;
}

/**
 * Recibo de auditoría de una revisión o verificación, con su identificador, qué se revisó, el resultado, el digest y la hora de emisión; se usa para dejar constancia de un control y descargar el recibo.
 *
 * El resultado va en texto dentro de una etiqueta con tono (`tone` del dato), no sólo en color; la descarga es una acción secundaria (`btn--secondary`).
 *
 * @example <AuditReceipt receiptId="AUD-2026-185" items={[{ label: "Objeto", value: "Censo 2024 · tabla comunal v4" }, { label: "Resultado", value: "1 observación", tone: "warn" }, { label: "Digest", value: "7c1e04ab…", monospace: true }]} href="/auditorias/AUD-2026-185.json" />
 */
export function AuditReceipt({
  title = "Recibo de auditoría",
  receiptId = "AUD-2026-184",
  items = ITEMS,
  href = "#json",
  linkLabel = "Descargar JSON",
  className,
}: AuditReceiptProps) {
  return (
    <article className={["ui-service", className].filter(Boolean).join(" ")} data-audit-receipt>
      <header>
        <strong>{title}</strong>
        {receiptId ? <code>{receiptId}</code> : null}
      </header>
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd><AuditReceiptValor item={item} /></dd>
            </div>
          ))}
        </dl>
      ) : null}
      {linkLabel ? <a className="btn btn--secondary" href={href}>{linkLabel}</a> : null}
    </article>
  );
}