Sección documental.

<section class="ui-sample ui-document" data-archive-section="true"><header><strong>Secciones del fondo</strong><span>Separadores físicos y digitales</span></header><ol><li><b>S1</b> <span>Constitutivo</span> <small>Verde</small></li><li><b>S2</b> <span>Gobierno</span> <small>Amarillo</small></li><li><b>S3</b> <span>Contratos</span> <small>Rosado</small></li><li><b>S4</b> <span>Finanzas</span> <small>Blanco</small></li><li><b>S5</b> <span>Archivo</span> <small>Celeste</small></li><li><b>T</b> <span>Trámite</span> <small>Café</small></li></ol></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-archive-section="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Secciones del fondo</strong><span>Separadores físicos y digitales</span></header><ol class="grid gap-2"><li><b>S1</b> <span>Constitutivo</span> <small class="text-sm text-slate-600">Verde</small></li><li><b>S2</b> <span>Gobierno</span> <small class="text-sm text-slate-600">Amarillo</small></li><li><b>S3</b> <span>Contratos</span> <small class="text-sm text-slate-600">Rosado</small></li><li><b>S4</b> <span>Finanzas</span> <small class="text-sm text-slate-600">Blanco</small></li><li><b>S5</b> <span>Archivo</span> <small class="text-sm text-slate-600">Celeste</small></li><li><b>T</b> <span>Trámite</span> <small class="text-sm text-slate-600">Café</small></li></ol></section>

export interface ArchiveSectionItem {
  /** Sigla de la sección («S1», «T»). */
  code: string;
  /** Nombre de la sección. */
  label: string;
  /** Color del separador físico, como texto («Verde»); vacío lo oculta. */
  color?: string;
}

export interface ArchiveSectionProps {
  title?: string;
  /** Línea junto al título sobre el uso de las secciones; vacío la oculta. */
  detail?: string;
  /** Secciones del fondo, en orden de archivo. */
  items?: ArchiveSectionItem[];
  className?: string;
}

const ARCHIVE_SECTION_ITEMS: ArchiveSectionItem[] = [
  { code: "S1", label: "Constitutivo", color: "Verde" },
  { code: "S2", label: "Gobierno", color: "Amarillo" },
  { code: "S3", label: "Contratos", color: "Rosado" },
  { code: "S4", label: "Finanzas", color: "Blanco" },
  { code: "S5", label: "Archivo", color: "Celeste" },
  { code: "T", label: "Trámite", color: "Café" },
];

/**
 * Lista de las secciones de un fondo documental con su sigla, nombre y color de separador; se usa para ordenar el archivo físico y el digital con la misma clasificación.
 *
 * Sin `color` la sección no tiene separador físico, como en un fondo que sólo se archiva en digital.
 *
 * @example <ArchiveSection items={[{ code: "S2", label: "Gobierno", color: "Amarillo" }, { code: "S3", label: "Contratos", color: "Rosado" }]} />
 * @example <ArchiveSection title="Secciones del fondo COCHID" detail="Sólo archivo digital, sin separadores físicos" items={[{ code: "S1", label: "Constitutivo" }, { code: "S3", label: "Convenios de datos" }]} />
 */
export function ArchiveSection({
  title = "Secciones del fondo",
  detail = "Separadores físicos y digitales",
  items = ARCHIVE_SECTION_ITEMS,
  className,
}: ArchiveSectionProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-archive-section>
      {title || detail ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {detail ? <span>{detail}</span> : null}
        </header>
      ) : null}
      {items.length ? (
        <ol>
          {items.map((item, i) => (
            <li key={`${item.code}-${i}`}>
              <b>{item.code}</b>{" "}
              <span>{item.label}</span>
              {item.color ? " " : null}
              {item.color ? <small>{item.color}</small> : null}
            </li>
          ))}
        </ol>
      ) : null}
    </section>
  );
}