Metadatos del documento.

<dl class="ui-sample ui-document" data-document-metadata="true"><div><dt>Identificador</dt><dd>FYD-184</dd></div><div><dt>Plantilla</dt><dd>contrato-servicios@3</dd></div><div><dt>Definición</dt><dd><code>sha256:4e2a…78bd</code></dd></div><div><dt>Creado</dt><dd>24 ago 2026 · 11:42 CLT</dd></div></dl>

<dl class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-2" data-document-metadata="true"><div><dt>Identificador</dt><dd>FYD-184</dd></div><div><dt>Plantilla</dt><dd>contrato-servicios@3</dd></div><div><dt>Definición</dt><dd><code>sha256:4e2a…78bd</code></dd></div><div><dt>Creado</dt><dd>24 ago 2026 · 11:42 CLT</dd></div></dl>

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

export interface DocumentMetadataProps {
  /** Datos del documento en orden: identificador, plantilla, definición, fecha de creación. */
  items?: DocumentMetadataItem[];
  className?: string;
}

const DOCUMENT_METADATA_ITEMS: DocumentMetadataItem[] = [
  { label: "Identificador", value: "FYD-184" },
  { label: "Plantilla", value: "contrato-servicios@3" },
  { label: "Definición", value: "sha256:4e2a…78bd", monospace: true },
  { label: "Creado", value: "24 ago 2026 · 11:42 CLT" },
];

/**
 * Ficha de metadatos de un documento como lista de definiciones (identificador, plantilla, digest de la definición y fecha de creación); se usa junto al encabezado o en el panel lateral del documento.
 *
 * Sin datos no se renderiza nada.
 *
 * @example <DocumentMetadata items={[{ label: "Identificador", value: "FYD-184" }, { label: "Definición", value: "sha256:4e2a…78bd", monospace: true }, { label: "Creado", value: "25 ago 2026 · 17:16 CLT" }]} />
 */
export function DocumentMetadata({ items = DOCUMENT_METADATA_ITEMS, className }: DocumentMetadataProps) {
  if (!items.length) return null;
  return (
    <dl className={["ui-document", className].filter(Boolean).join(" ")} data-document-metadata>
      {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>
  );
}