Eventos operativos.

<section class="ui-sample ui-service" data-event-timeline="true"><header><strong>Eventos de SOL-2026-00184</strong><span>3 eventos</span></header><ol><li><time>17:16:04</time> Inicio solicitado por el programador de tareas</li><li><time>17:16:06</time> Validación completa</li><li><time>17:16:08</time> Recibo emitido</li></ol></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-event-timeline="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Eventos de SOL-2026-00184</strong><span>3 eventos</span></header><ol class="grid gap-2"><li><time>17:16:04</time> Inicio solicitado por el programador de tareas</li><li><time>17:16:06</time> Validación completa</li><li><time>17:16:08</time> Recibo emitido</li></ol></section>

export interface EventTimelineItem {
  /** Hora visible del evento (`17:16:04`). */
  time: string;
  /** Fecha y hora completas en ISO 8601 para el atributo `datetime` de `<time>`. */
  dateTime?: string;
  /** Qué ocurrió, en una frase corta. */
  title: string;
}

export interface EventTimelineProps {
  /** Título de la lista, con el identificador de la ejecución o del proceso. */
  title?: string;
  /** Resumen junto al título; sin él se muestra la cantidad de eventos («3 eventos»). */
  summary?: string;
  /** Eventos en orden cronológico; sin eventos no se muestra la lista. */
  items?: EventTimelineItem[];
  className?: string;
}

const ITEMS: EventTimelineItem[] = [
  { time: "17:16:04", title: "Inicio solicitado por el programador de tareas" },
  { time: "17:16:06", title: "Validación completa" },
  { time: "17:16:08", title: "Recibo emitido" },
];

/**
 * Registro de eventos de una ejecución o proceso de servicio, con hora y descripción de cada paso; se usa en paneles de operación y en el detalle de una ejecución.
 *
 * @example <EventTimeline title="Eventos de SOL-2026-00185" items={[{ time: "09:02:11", dateTime: "2026-09-27T09:02:11-03:00", title: "Inicio solicitado por el programador de tareas" }, { time: "09:02:15", title: "Fuente parcial detectada" }]} />
 */
export function EventTimeline({ title = "Eventos de SOL-2026-00184", summary, items = ITEMS, className }: EventTimelineProps) {
  const resumen = summary ?? `${items.length} ${items.length === 1 ? "evento" : "eventos"}`;
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-event-timeline>
      <header>
        <strong>{title}</strong>
        {resumen ? <span>{resumen}</span> : null}
      </header>
      {items.length ? (
        <ol>
          {items.map((item, i) => (
            <li key={`${item.time}-${i}`}>
              <time dateTime={item.dateTime}>{item.time}</time>
              {` ${item.title}`}
            </li>
          ))}
        </ol>
      ) : null}
    </section>
  );
}