Fondo documental.

<section class="ui-sample ui-document" data-archive-fund="true"><header><strong>Fondo CDS</strong><code>CDS</code></header><p>Círculo de Santiago SpA · productor documental.</p><dl><div><dt>Secciones</dt><dd>S1–S5 y T</dd></div><div><dt>Foliación</dt><dd>Continua por fondo</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-fund="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Fondo CDS</strong><code>CDS</code></header><p>Círculo de Santiago SpA · productor documental.</p><dl class="grid gap-2"><div><dt>Secciones</dt><dd>S1–S5 y T</dd></div><div><dt>Foliación</dt><dd>Continua por fondo</dd></div></dl></section>

export interface ArchiveFundItem {
  /** Nombre del dato (`<dt>`). */
  label: string;
  value: string;
}

export interface ArchiveFundProps {
  title?: string;
  /** Sigla del fondo, la que encabeza sus números documentales («CDS»); vacío la oculta. */
  code?: string;
  /** Entidad productora del fondo y su papel; vacío lo oculta. */
  description?: string;
  /** Datos del fondo: secciones que contiene y regla de foliación. */
  items?: ArchiveFundItem[];
  className?: string;
}

const ARCHIVE_FUND_ITEMS: ArchiveFundItem[] = [
  { label: "Secciones", value: "S1–S5 y T" },
  { label: "Foliación", value: "Continua por fondo" },
];

/**
 * Ficha de un fondo documental, el conjunto de documentos de una entidad productora, con su sigla, secciones y regla de foliación; se usa en la portada del archivo de cada entidad.
 *
 * @example <ArchiveFund title="Fondo COCHID" code="COCHID" description="COCHID SpA · productor documental." items={[{ label: "Secciones", value: "S1, S3 y S5" }, { label: "Soporte", value: "Sólo digital" }]} />
 */
export function ArchiveFund({
  title = "Fondo CDS",
  code = "CDS",
  description = "Círculo de Santiago SpA · productor documental.",
  items = ARCHIVE_FUND_ITEMS,
  className,
}: ArchiveFundProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-archive-fund>
      {title || code ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {code ? <code>{code}</code> : null}
        </header>
      ) : null}
      {description ? <p>{description}</p> : null}
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
    </section>
  );
}