Historial de versiones.

<section class="ui-sample ui-document" data-version-history="true"><header><strong>Historial de versiones</strong><span>v3</span></header><ol><li><time dateTime="2026-08-25T17:20:00-04:00">v3 · 25 ago 17:20</time> Se corrigió la cláusula cuarta.</li><li><time dateTime="2026-08-25T16:48:00-04:00">v2 · 25 ago 16:48</time> Se agregó el anexo de datos.</li></ol><a href="#comparar">Comparar versiones</a></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-version-history="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Historial de versiones</strong><span>v3</span></header><ol class="grid gap-2"><li><time dateTime="2026-08-25T17:20:00-04:00">v3 · 25 ago 17:20</time> Se corrigió la cláusula cuarta.</li><li><time dateTime="2026-08-25T16:48:00-04:00">v2 · 25 ago 16:48</time> Se agregó el anexo de datos.</li></ol><a class="underline underline-offset-4" href="#comparar">Comparar versiones</a></section>

export interface VersionHistoryItem {
  /** Versión que dejó el cambio («v3»). */
  version: string;
  /** Fecha u hora visible del cambio («25 ago 17:20»); vacía muestra sólo la versión. */
  time?: string;
  /** Fecha y hora del cambio en ISO 8601 (atributo `dateTime`). */
  dateTime: string;
  /** Qué cambió, en una oración; vacío muestra sólo la versión y la hora. */
  description: string;
}

export interface VersionHistoryProps {
  title?: string;
  /** Versión vigente, junto al título; vacía la oculta. */
  version?: string;
  /** Cambios del más reciente al más antiguo. */
  items?: VersionHistoryItem[];
  /** Destino de la comparación de versiones; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace a la comparación; vacío oculta el enlace. */
  linkLabel?: string;
  className?: string;
}

const VERSION_HISTORY_ITEMS: VersionHistoryItem[] = [
  { version: "v3", time: "25 ago 17:20", dateTime: "2026-08-25T17:20:00-04:00", description: "Se corrigió la cláusula cuarta." },
  { version: "v2", time: "25 ago 16:48", dateTime: "2026-08-25T16:48:00-04:00", description: "Se agregó el anexo de datos." },
];

/**
 * Historial de versiones de un documento con la versión vigente y cada cambio con su versión, hora y descripción; se usa en el panel del documento para revisar qué cambió y comparar versiones.
 *
 * @example <VersionHistory version="v4" items={[{ version: "v4", time: "25 ago 17:20", dateTime: "2026-08-25T17:20:00-04:00", description: "Se corrigió la cláusula cuarta." }, { version: "v3", time: "25 ago 16:48", dateTime: "2026-08-25T16:48:00-04:00", description: "Se agregó el anexo de datos." }]} href="/documentos/FYD-184/comparar" linkLabel="Comparar v3 con v4" />
 */
export function VersionHistory({
  title = "Historial de versiones",
  version = "v3",
  items = VERSION_HISTORY_ITEMS,
  href = "#comparar",
  linkLabel = "Comparar versiones",
  className,
}: VersionHistoryProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-version-history>
      <header>
        <strong>{title}</strong>
        {version ? <span>{version}</span> : null}
      </header>
      {items.length ? (
        <ol>
          {items.map((item, i) => (
            <li key={`${item.dateTime}-${i}`}>
              <time dateTime={item.dateTime}>{item.time ? `${item.version} · ${item.time}` : item.version}</time>
              {item.description ? ` ${item.description}` : null}
            </li>
          ))}
        </ol>
      ) : null}
      {href && linkLabel ? <a href={href}>{linkLabel}</a> : null}
    </section>
  );
}