Ejemplar documental.

<article class="ui-sample ui-document" data-document-copy="true"><header><strong>Ejemplar 1</strong><span>Original firmado</span></header><dl><div><dt>Soporte</dt><dd>Papel</dd></div><div><dt>Custodio</dt><dd>Archivo de la Compañía de Innovación de Santiago</dd></div><div><dt>Digest</dt><dd><code>4e2a…78bd</code></dd></div></dl></article>

<article class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-document-copy="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Ejemplar 1</strong><span>Original firmado</span></header><dl class="grid gap-2"><div><dt>Soporte</dt><dd>Papel</dd></div><div><dt>Custodio</dt><dd>Archivo de la Compañía de Innovación de Santiago</dd></div><div><dt>Digest</dt><dd><code>4e2a…78bd</code></dd></div></dl></article>

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

export interface DocumentCopyProps {
  /** Nombre del ejemplar («Ejemplar 1»). */
  title?: string;
  /** Carácter del ejemplar («Original firmado», «Copia de contraparte»); vacío lo oculta. */
  status?: string;
  /** Datos del ejemplar: soporte, quién lo custodia y digest del contenido. */
  items?: DocumentCopyItem[];
  className?: string;
}

const ITEMS: DocumentCopyItem[] = [
  { label: "Soporte", value: "Papel" },
  { label: "Custodio", value: "Archivo de la Compañía de Innovación de Santiago" },
  { label: "Digest", value: "4e2a…78bd", monospace: true },
];

/**
 * Ficha de un ejemplar de un documento (original firmado, copia de contraparte) con su soporte, custodio y digest; se usa para distinguir los ejemplares de un mismo documento.
 *
 * Todos los ejemplares de un documento comparten el digest; si difiere, no son el mismo contenido.
 *
 * @example <DocumentCopy title="Ejemplar 2" status="Copia de contraparte" items={[{ label: "Soporte", value: "PDF firmado" }, { label: "Custodio", value: "Cliente" }, { label: "Digest", value: "4e2a…78bd", monospace: true }]} />
 */
export function DocumentCopy({
  title = "Ejemplar 1",
  status = "Original firmado",
  items = ITEMS,
  className,
}: DocumentCopyProps) {
  return (
    <article className={["ui-document", className].filter(Boolean).join(" ")} data-document-copy>
      {title || status ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {status ? <span>{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}
    </article>
  );
}