Verificación por QR.

<section class="ui-sample ui-document" data-qr-verification="true"><header><strong>Verificar documento</strong><span class="badge badge--ok">Coincide</span></header><div role="img" aria-label="Código QR de verificación"><svg width="116" height="116" viewBox="0 0 29 29" shape-rendering="crispEdges" aria-hidden="true"><rect width="29" height="29" fill="#fff"></rect><path fill="#000" d="M2 2h7v1h-7zM10 2h1v1h-1zM13 2h3v1h-3zM18 2h1v1h-1zM20 2h7v1h-7zM2 3h1v1h-1zM8 3h1v1h-1zM10 3h1v1h-1zM12 3h3v1h-3zM18 3h1v1h-1zM20 3h1v1h-1zM26 3h1v1h-1zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h1v1h-1zM10 4h1v1h-1zM13 4h1v1h-1zM15 4h2v1h-2zM20 4h1v1h-1zM22 4h3v1h-3zM26 4h1v1h-1zM2 5h1v1h-1zM4 5h3v1h-3zM8 5h1v1h-1zM12 5h1v1h-1zM16 5h3v1h-3zM20 5h1v1h-1zM22 5h3v1h-3zM26 5h1v1h-1zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h1v1h-1zM10 6h3v1h-3zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h1v1h-1zM20 6h1v1h-1zM22 6h3v1h-3zM26 6h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM18 7h1v1h-1zM20 7h1v1h-1zM26 7h1v1h-1zM2 8h7v1h-7zM10 8h1v1h-1zM12 8h1v1h-1zM14 8h1v1h-1zM16 8h1v1h-1zM18 8h1v1h-1zM20 8h7v1h-7zM12 9h1v1h-1zM14 9h5v1h-5zM2 10h1v1h-1zM5 10h8v1h-8zM15 10h5v1h-5zM22 10h1v1h-1zM24 10h3v1h-3zM5 11h2v1h-2zM9 11h3v1h-3zM13 11h2v1h-2zM16 11h3v1h-3zM21 11h1v1h-1zM23 11h2v1h-2zM2 12h1v1h-1zM4 12h1v1h-1zM7 12h5v1h-5zM13 12h2v1h-2zM17 12h1v1h-1zM19 12h1v1h-1zM21 12h2v1h-2zM26 12h1v1h-1zM2 13h1v1h-1zM5 13h1v1h-1zM9 13h3v1h-3zM15 13h1v1h-1zM17 13h2v1h-2zM20 13h1v1h-1zM23 13h3v1h-3zM2 14h1v1h-1zM6 14h1v1h-1zM8 14h3v1h-3zM13 14h3v1h-3zM18 14h1v1h-1zM20 14h1v1h-1zM22 14h4v1h-4zM2 15h2v1h-2zM5 15h2v1h-2zM10 15h1v1h-1zM12 15h1v1h-1zM17 15h7v1h-7zM2 16h9v1h-9zM13 16h4v1h-4zM20 16h1v1h-1zM22 16h2v1h-2zM2 17h1v1h-1zM4 17h2v1h-2zM9 17h1v1h-1zM12 17h2v1h-2zM16 17h1v1h-1zM20 17h1v1h-1zM24 17h3v1h-3zM2 18h1v1h-1zM4 18h1v1h-1zM7 18h2v1h-2zM10 18h2v1h-2zM16 18h1v1h-1zM18 18h5v1h-5zM24 18h3v1h-3zM10 19h1v1h-1zM12 19h3v1h-3zM17 19h2v1h-2zM22 19h2v1h-2zM2 20h7v1h-7zM10 20h4v1h-4zM15 20h4v1h-4zM20 20h1v1h-1zM22 20h1v1h-1zM24 20h2v1h-2zM2 21h1v1h-1zM8 21h1v1h-1zM10 21h1v1h-1zM12 21h1v1h-1zM14 21h1v1h-1zM16 21h3v1h-3zM22 21h3v1h-3zM26 21h1v1h-1zM2 22h1v1h-1zM4 22h3v1h-3zM8 22h1v1h-1zM10 22h1v1h-1zM12 22h1v1h-1zM14 22h2v1h-2zM17 22h6v1h-6zM24 22h1v1h-1zM26 22h1v1h-1zM2 23h1v1h-1zM4 23h3v1h-3zM8 23h1v1h-1zM10 23h1v1h-1zM12 23h1v1h-1zM17 23h1v1h-1zM20 23h2v1h-2zM24 23h3v1h-3zM2 24h1v1h-1zM4 24h3v1h-3zM8 24h1v1h-1zM12 24h1v1h-1zM14 24h1v1h-1zM16 24h1v1h-1zM18 24h2v1h-2zM22 24h5v1h-5zM2 25h1v1h-1zM8 25h1v1h-1zM17 25h6v1h-6zM25 25h1v1h-1zM2 26h7v1h-7zM10 26h1v1h-1zM14 26h5v1h-5zM22 26h1v1h-1zM24 26h3v1h-3z"></path></svg></div><dl><div><dt>Número</dt><dd>PRE-2026-018</dd></div><div><dt>Digest</dt><dd><code>4e2a…78bd</code></dd></div><div><dt>Fuente</dt><dd>Firmas y Documentos</dd></div></dl><a href="#verificar">Abrir verificación pública</a></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-qr-verification="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Verificar documento</strong><span class="badge badge--ok">Coincide</span></header><div role="img" aria-label="Código QR de verificación"><svg class="h-auto w-full" width="116" height="116" viewBox="0 0 29 29" shape-rendering="crispEdges" aria-hidden="true"><rect width="29" height="29" fill="#fff"></rect><path fill="#000" d="M2 2h7v1h-7zM10 2h1v1h-1zM13 2h3v1h-3zM18 2h1v1h-1zM20 2h7v1h-7zM2 3h1v1h-1zM8 3h1v1h-1zM10 3h1v1h-1zM12 3h3v1h-3zM18 3h1v1h-1zM20 3h1v1h-1zM26 3h1v1h-1zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h1v1h-1zM10 4h1v1h-1zM13 4h1v1h-1zM15 4h2v1h-2zM20 4h1v1h-1zM22 4h3v1h-3zM26 4h1v1h-1zM2 5h1v1h-1zM4 5h3v1h-3zM8 5h1v1h-1zM12 5h1v1h-1zM16 5h3v1h-3zM20 5h1v1h-1zM22 5h3v1h-3zM26 5h1v1h-1zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h1v1h-1zM10 6h3v1h-3zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h1v1h-1zM20 6h1v1h-1zM22 6h3v1h-3zM26 6h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM18 7h1v1h-1zM20 7h1v1h-1zM26 7h1v1h-1zM2 8h7v1h-7zM10 8h1v1h-1zM12 8h1v1h-1zM14 8h1v1h-1zM16 8h1v1h-1zM18 8h1v1h-1zM20 8h7v1h-7zM12 9h1v1h-1zM14 9h5v1h-5zM2 10h1v1h-1zM5 10h8v1h-8zM15 10h5v1h-5zM22 10h1v1h-1zM24 10h3v1h-3zM5 11h2v1h-2zM9 11h3v1h-3zM13 11h2v1h-2zM16 11h3v1h-3zM21 11h1v1h-1zM23 11h2v1h-2zM2 12h1v1h-1zM4 12h1v1h-1zM7 12h5v1h-5zM13 12h2v1h-2zM17 12h1v1h-1zM19 12h1v1h-1zM21 12h2v1h-2zM26 12h1v1h-1zM2 13h1v1h-1zM5 13h1v1h-1zM9 13h3v1h-3zM15 13h1v1h-1zM17 13h2v1h-2zM20 13h1v1h-1zM23 13h3v1h-3zM2 14h1v1h-1zM6 14h1v1h-1zM8 14h3v1h-3zM13 14h3v1h-3zM18 14h1v1h-1zM20 14h1v1h-1zM22 14h4v1h-4zM2 15h2v1h-2zM5 15h2v1h-2zM10 15h1v1h-1zM12 15h1v1h-1zM17 15h7v1h-7zM2 16h9v1h-9zM13 16h4v1h-4zM20 16h1v1h-1zM22 16h2v1h-2zM2 17h1v1h-1zM4 17h2v1h-2zM9 17h1v1h-1zM12 17h2v1h-2zM16 17h1v1h-1zM20 17h1v1h-1zM24 17h3v1h-3zM2 18h1v1h-1zM4 18h1v1h-1zM7 18h2v1h-2zM10 18h2v1h-2zM16 18h1v1h-1zM18 18h5v1h-5zM24 18h3v1h-3zM10 19h1v1h-1zM12 19h3v1h-3zM17 19h2v1h-2zM22 19h2v1h-2zM2 20h7v1h-7zM10 20h4v1h-4zM15 20h4v1h-4zM20 20h1v1h-1zM22 20h1v1h-1zM24 20h2v1h-2zM2 21h1v1h-1zM8 21h1v1h-1zM10 21h1v1h-1zM12 21h1v1h-1zM14 21h1v1h-1zM16 21h3v1h-3zM22 21h3v1h-3zM26 21h1v1h-1zM2 22h1v1h-1zM4 22h3v1h-3zM8 22h1v1h-1zM10 22h1v1h-1zM12 22h1v1h-1zM14 22h2v1h-2zM17 22h6v1h-6zM24 22h1v1h-1zM26 22h1v1h-1zM2 23h1v1h-1zM4 23h3v1h-3zM8 23h1v1h-1zM10 23h1v1h-1zM12 23h1v1h-1zM17 23h1v1h-1zM20 23h2v1h-2zM24 23h3v1h-3zM2 24h1v1h-1zM4 24h3v1h-3zM8 24h1v1h-1zM12 24h1v1h-1zM14 24h1v1h-1zM16 24h1v1h-1zM18 24h2v1h-2zM22 24h5v1h-5zM2 25h1v1h-1zM8 25h1v1h-1zM17 25h6v1h-6zM25 25h1v1h-1zM2 26h7v1h-7zM10 26h1v1h-1zM14 26h5v1h-5zM22 26h1v1h-1zM24 26h3v1h-3z"></path></svg></div><dl class="grid gap-2"><div><dt>Número</dt><dd>PRE-2026-018</dd></div><div><dt>Digest</dt><dd><code>4e2a…78bd</code></dd></div><div><dt>Fuente</dt><dd>Firmas y Documentos</dd></div></dl><a class="underline underline-offset-4" href="#verificar">Abrir verificación pública</a></section>

import type { ReactNode } from "react";

/** Tono de la insignia de resultado: `ok` si coincide, `err` si no coincide o está revocado, `warn` si falta un dato, `neutral` sin tono. */
export type QrVerificationTone = "ok" | "warn" | "err" | "neutral";

export interface QrVerificationItem {
  /** Nombre del dato (`<dt>`): número, digest, fuente. */
  label: string;
  value: string;
  /** Muestra el valor en `<code>`, para digests o identificadores que se copian tal cual. */
  monospace?: boolean;
}

export interface QrVerificationProps {
  title?: string;
  /** Resultado de la verificación («Coincide», «No coincide»); va en una insignia. Vacío lo oculta. */
  status?: string;
  /** Tono de la insignia; sin valor se deduce de `status` («Coincide» → `ok`, «No coincide» y «Revocado» → `err`) y si no lo reconoce es `neutral`. */
  statusTone?: QrVerificationTone;
  /** Contenido del recuadro del código: un `<svg>` o `<img>` con el QR, con ancho y alto explícitos. Por defecto, un QR de muestra de 116 px; vacío oculta el recuadro. */
  qr?: ReactNode;
  /** Texto alternativo del código QR: `aria-label` del recuadro con `role="img"`. */
  alt?: string;
  /** Datos verificados: número del documento, digest y fuente que lo emitió. */
  items?: QrVerificationItem[];
  /** Destino de la verificación pública; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace a la verificación pública; vacío oculta el enlace. */
  linkLabel?: string;
  className?: string;
}

const ITEMS: QrVerificationItem[] = [
  { label: "Número", value: "PRE-2026-018" },
  { label: "Digest", value: "4e2a…78bd", monospace: true },
  { label: "Fuente", value: "Firmas y Documentos" },
];

const QR_VERIFICATION_BADGE: Record<QrVerificationTone, string> = {
  ok: "badge badge--ok",
  warn: "badge badge--warn",
  err: "badge badge--err",
  neutral: "badge",
};

const QR_VERIFICATION_TONES: Record<string, QrVerificationTone> = {
  "Coincide": "ok",
  "No coincide": "err",
  "Revocado": "err",
};

// Código QR de muestra (versión 2, 25 × 25 módulos y margen de 2): codifica HTTPS://EXAMPLE.CL/V/PRE-2026-018.
const QR_VERIFICATION_CODE = (
  <svg width="116" height="116" viewBox="0 0 29 29" shapeRendering="crispEdges" aria-hidden="true">
    <rect width="29" height="29" fill="#fff" />
    <path fill="#000" d="M2 2h7v1h-7zM10 2h1v1h-1zM13 2h3v1h-3zM18 2h1v1h-1zM20 2h7v1h-7zM2 3h1v1h-1zM8 3h1v1h-1zM10 3h1v1h-1zM12 3h3v1h-3zM18 3h1v1h-1zM20 3h1v1h-1zM26 3h1v1h-1zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h1v1h-1zM10 4h1v1h-1zM13 4h1v1h-1zM15 4h2v1h-2zM20 4h1v1h-1zM22 4h3v1h-3zM26 4h1v1h-1zM2 5h1v1h-1zM4 5h3v1h-3zM8 5h1v1h-1zM12 5h1v1h-1zM16 5h3v1h-3zM20 5h1v1h-1zM22 5h3v1h-3zM26 5h1v1h-1zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h1v1h-1zM10 6h3v1h-3zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h1v1h-1zM20 6h1v1h-1zM22 6h3v1h-3zM26 6h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM18 7h1v1h-1zM20 7h1v1h-1zM26 7h1v1h-1zM2 8h7v1h-7zM10 8h1v1h-1zM12 8h1v1h-1zM14 8h1v1h-1zM16 8h1v1h-1zM18 8h1v1h-1zM20 8h7v1h-7zM12 9h1v1h-1zM14 9h5v1h-5zM2 10h1v1h-1zM5 10h8v1h-8zM15 10h5v1h-5zM22 10h1v1h-1zM24 10h3v1h-3zM5 11h2v1h-2zM9 11h3v1h-3zM13 11h2v1h-2zM16 11h3v1h-3zM21 11h1v1h-1zM23 11h2v1h-2zM2 12h1v1h-1zM4 12h1v1h-1zM7 12h5v1h-5zM13 12h2v1h-2zM17 12h1v1h-1zM19 12h1v1h-1zM21 12h2v1h-2zM26 12h1v1h-1zM2 13h1v1h-1zM5 13h1v1h-1zM9 13h3v1h-3zM15 13h1v1h-1zM17 13h2v1h-2zM20 13h1v1h-1zM23 13h3v1h-3zM2 14h1v1h-1zM6 14h1v1h-1zM8 14h3v1h-3zM13 14h3v1h-3zM18 14h1v1h-1zM20 14h1v1h-1zM22 14h4v1h-4zM2 15h2v1h-2zM5 15h2v1h-2zM10 15h1v1h-1zM12 15h1v1h-1zM17 15h7v1h-7zM2 16h9v1h-9zM13 16h4v1h-4zM20 16h1v1h-1zM22 16h2v1h-2zM2 17h1v1h-1zM4 17h2v1h-2zM9 17h1v1h-1zM12 17h2v1h-2zM16 17h1v1h-1zM20 17h1v1h-1zM24 17h3v1h-3zM2 18h1v1h-1zM4 18h1v1h-1zM7 18h2v1h-2zM10 18h2v1h-2zM16 18h1v1h-1zM18 18h5v1h-5zM24 18h3v1h-3zM10 19h1v1h-1zM12 19h3v1h-3zM17 19h2v1h-2zM22 19h2v1h-2zM2 20h7v1h-7zM10 20h4v1h-4zM15 20h4v1h-4zM20 20h1v1h-1zM22 20h1v1h-1zM24 20h2v1h-2zM2 21h1v1h-1zM8 21h1v1h-1zM10 21h1v1h-1zM12 21h1v1h-1zM14 21h1v1h-1zM16 21h3v1h-3zM22 21h3v1h-3zM26 21h1v1h-1zM2 22h1v1h-1zM4 22h3v1h-3zM8 22h1v1h-1zM10 22h1v1h-1zM12 22h1v1h-1zM14 22h2v1h-2zM17 22h6v1h-6zM24 22h1v1h-1zM26 22h1v1h-1zM2 23h1v1h-1zM4 23h3v1h-3zM8 23h1v1h-1zM10 23h1v1h-1zM12 23h1v1h-1zM17 23h1v1h-1zM20 23h2v1h-2zM24 23h3v1h-3zM2 24h1v1h-1zM4 24h3v1h-3zM8 24h1v1h-1zM12 24h1v1h-1zM14 24h1v1h-1zM16 24h1v1h-1zM18 24h2v1h-2zM22 24h5v1h-5zM2 25h1v1h-1zM8 25h1v1h-1zM17 25h6v1h-6zM25 25h1v1h-1zM2 26h7v1h-7zM10 26h1v1h-1zM14 26h5v1h-5zM22 26h1v1h-1zM24 26h3v1h-3z" />
  </svg>
);

/**
 * Verificación de un documento por código QR, con el resultado, el número, el digest y la fuente; se usa en la página a la que lleva el QR impreso en el documento.
 *
 * El resultado va en texto dentro de una insignia con tono. Si el digest no coincide con el registrado, `status` lo indica («No coincide») y la insignia pasa a tono de error.
 *
 * @example <QrVerification qr={<img src="/qr/PRE-2026-018.svg" alt="" width={116} height={116} />} href="/verificar/PRE-2026-018" />
 * @example <QrVerification status="No coincide" items={[{ label: "Número", value: "PRE-2026-018" }, { label: "Digest", value: "b19f…93ce", monospace: true }, { label: "Fuente", value: "Firmas y Documentos" }]} />
 */
export function QrVerification({
  title = "Verificar documento",
  status = "Coincide",
  statusTone,
  qr = QR_VERIFICATION_CODE,
  alt = "Código QR de verificación",
  items = ITEMS,
  href = "#verificar",
  linkLabel = "Abrir verificación pública",
  className,
}: QrVerificationProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-qr-verification>
      {title || status ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {status ? <span className={QR_VERIFICATION_BADGE[statusTone ?? QR_VERIFICATION_TONES[status] ?? "neutral"]}>{status}</span> : null}
        </header>
      ) : null}
      {qr ? <div role="img" aria-label={alt}>{qr}</div> : null}
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.monospace ? <code>{item.value}</code> : item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
      {href && linkLabel ? <a href={href}>{linkLabel}</a> : null}
    </section>
  );
}