Espejo físico y digital.

<section class="ui-sample ui-document" data-archive-mirror="true"><header><strong>Espejo físico y digital</strong><span class="badge badge--ok">Coincidente</span></header><dl><div><dt>Físico</dt><dd>CDS-A1 · folios 119–126</dd></div><div><dt>Digital</dt><dd>/cds/s3/ctr/2026/014 · 8 archivos</dd></div><div><dt>Verificado</dt><dd>25 ago 2026 · 18:42 CLT</dd></div></dl></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-archive-mirror="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Espejo físico y digital</strong><span class="badge badge--ok">Coincidente</span></header><dl class="grid gap-2"><div><dt>Físico</dt><dd>CDS-A1 · folios 119–126</dd></div><div><dt>Digital</dt><dd>/cds/s3/ctr/2026/014 · 8 archivos</dd></div><div><dt>Verificado</dt><dd>25 ago 2026 · 18:42 CLT</dd></div></dl></section>

export interface ArchiveMirrorItem {
  /** Nombre del dato (`<dt>`): ubicación física, ubicación digital, verificación. */
  label: string;
  value: string;
  /** Muestra el valor en `<code>`, para rutas o identificadores que se copian tal cual. */
  monospace?: boolean;
}

export interface ArchiveMirrorProps {
  title?: string;
  /** Resultado de la comparación («Coincidente», «Desalineado», «Sin verificar»); se muestra como etiqueta y vacío la oculta. */
  status?: string;
  /** Tono de la etiqueta de estado; por defecto se deduce del texto (coincidente: `ok`; sin verificar: `warn`; desalineado: `err`). */
  statusTone?: "ok" | "warn" | "err" | "neutral";
  /** Ubicación física, ubicación digital con su cantidad de archivos y fecha de la última verificación. */
  items?: ArchiveMirrorItem[];
  className?: string;
}

const ITEMS: ArchiveMirrorItem[] = [
  { label: "Físico", value: "CDS-A1 · folios 119–126" },
  { label: "Digital", value: "/cds/s3/ctr/2026/014 · 8 archivos" },
  { label: "Verificado", value: "25 ago 2026 · 18:42 CLT" },
];

const ARCHIVE_MIRROR_TONOS: [string, "ok" | "warn" | "err"][] = [
  ["coincidente", "ok"],
  ["sin verificar", "warn"],
  ["pendiente", "warn"],
  ["desalineado", "err"],
];

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

/**
 * Comparación entre la copia física y la copia digital de un documento, con la ubicación de cada una, la fecha de verificación y el resultado como etiqueta; se usa para detectar cuándo el archivo en papel y el digital dejaron de coincidir.
 *
 * El resultado va en texto dentro de una etiqueta con tono (`badge`), no sólo en color.
 *
 * @example <ArchiveMirror status="Desalineado" items={[{ label: "Físico", value: "CDS-A1 · folios 119–126" }, { label: "Digital", value: "/cds/s3/ctr/2026/014 · 7 archivos" }, { label: "Verificado", value: "25 ago 2026 · 18:42 CLT" }]} />
 */
export function ArchiveMirror({
  title = "Espejo físico y digital",
  status = "Coincidente",
  statusTone,
  items = ITEMS,
  className,
}: ArchiveMirrorProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-archive-mirror>
      {title || status ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {status ? <span className={claseEstado(status, statusTone)}>{status}</span> : null}
        </header>
      ) : 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}
    </section>
  );
}