Ticker.

<section class="ui-sample ui-content" data-ticker="true" aria-label="Actualizaciones"><strong>Ahora</strong><ul><li><time datetime="2026-08-25T18:20:00-04:00">18:20</time> <span>Se publica el índice de actividad regional</span></li><li><time datetime="2026-08-25T18:08:00-04:00">18:08</time> <span>Nueva actualización de transporte</span></li></ul></section>

<section class="ui-sample ui-content border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-ticker="true" aria-label="Actualizaciones"><strong>Ahora</strong><ul class="grid gap-2"><li><time datetime="2026-08-25T18:20:00-04:00">18:20</time> <span>Se publica el índice de actividad regional</span></li><li><time datetime="2026-08-25T18:08:00-04:00">18:08</time> <span>Nueva actualización de transporte</span></li></ul></section>

export interface TickerItem {
  /** Hora visible de la actualización (`18:20`). */
  time: string;
  /** Fecha y hora completas en ISO 8601 para el atributo `datetime` de `<time>`. */
  dateTime?: string;
  /** Texto de la actualización. */
  title: string;
  /** Enlace a la nota completa; si existe, el texto se muestra como enlace. */
  href?: string;
}

export interface TickerProps {
  /** Rótulo visible antes de la lista. */
  title?: string;
  /** Nombre accesible de la sección. */
  label?: string;
  /** Actualizaciones, de la más reciente a la más antigua. */
  items?: TickerItem[];
  className?: string;
}

const TICKER_ITEMS: TickerItem[] = [
  { time: "18:20", dateTime: "2026-08-25T18:20:00-04:00", title: "Se publica el índice de actividad regional" },
  { time: "18:08", dateTime: "2026-08-25T18:08:00-04:00", title: "Nueva actualización de transporte" },
];

/**
 * Ticker de actualizaciones breves con hora, de la más reciente a la más antigua; se usa en portadas y coberturas en desarrollo.
 *
 * La lista no se desplaza sola: el orden y la cantidad de entradas los define quien la renderiza.
 *
 * @example <Ticker items={[{ time: "18:20", dateTime: "2026-08-25T18:20:00-04:00", title: "Metro normaliza frecuencia en Línea 1", href: "/notas/metro" }]} />
 */
export function Ticker({ title = "Ahora", label = "Actualizaciones", items = TICKER_ITEMS, className }: TickerProps) {
  if (!items.length) return null;
  return (
    <section className={["ui-content", className].filter(Boolean).join(" ")} data-ticker aria-label={label}>
      {title ? <strong>{title}</strong> : null}
      <ul>
        {items.map((item, i) => (
          <li key={`${item.time}-${i}`}>
            <time dateTime={item.dateTime}>{item.time}</time>{" "}
            {item.href ? <a href={item.href}>{item.title}</a> : <span>{item.title}</span>}
          </li>
        ))}
      </ul>
    </section>
  );
}