Agenda.

<section class="ui-sample ui-content" data-agenda="true"><h3>Agenda de hoy</h3><ol><li><time dateTime="2026-08-25T10:00:00-04:00">10:00</time> <span>Sesión del Concejo Municipal</span> <a href="#evento">Ver fuente</a></li><li><time dateTime="2026-08-25T18:30:00-04:00">18:30</time> <span>Conversatorio sobre ciudad</span> <a href="#evento-2">Detalles</a></li></ol></section>

<section class="ui-sample ui-content border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-agenda="true"><h3>Agenda de hoy</h3><ol class="grid gap-2"><li><time dateTime="2026-08-25T10:00:00-04:00">10:00</time> <span>Sesión del Concejo Municipal</span> <a class="underline underline-offset-4" href="#evento">Ver fuente</a></li><li><time dateTime="2026-08-25T18:30:00-04:00">18:30</time> <span>Conversatorio sobre ciudad</span> <a class="underline underline-offset-4" href="#evento-2">Detalles</a></li></ol></section>

export interface AgendaItem {
  /** Hora visible del evento (`10:00`). */
  time: string;
  /** Fecha y hora completas en ISO 8601 para el atributo `datetime` de `<time>`. */
  dateTime?: string;
  /** Nombre del evento. */
  title: string;
  /** Enlace a la fuente o al detalle del evento; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace de este evento (`Ver fuente`); si falta, se usa el `linkLabel` de la agenda. */
  linkLabel?: string;
}

export interface AgendaProps {
  /** Título de la agenda. */
  title?: string;
  /** Eventos en orden cronológico. */
  items?: AgendaItem[];
  /** Texto del enlace para los eventos que no traen `linkLabel` propio. */
  linkLabel?: string;
  className?: string;
}

const AGENDA_ITEMS: AgendaItem[] = [
  { time: "10:00", dateTime: "2026-08-25T10:00:00-04:00", title: "Sesión del Concejo Municipal", href: "#evento", linkLabel: "Ver fuente" },
  { time: "18:30", dateTime: "2026-08-25T18:30:00-04:00", title: "Conversatorio sobre ciudad", href: "#evento-2", linkLabel: "Detalles" },
];

/**
 * Agenda del día: lista ordenada de eventos con hora, nombre y enlace a la fuente o al detalle, para secciones de ciudad o coberturas.
 *
 * Cada enlace usa el `linkLabel` del evento o, si falta, el de la agenda.
 *
 * @example <Agenda title="Agenda de mañana" items={[{ time: "10:00", dateTime: "2026-08-26T10:00:00-04:00", title: "Sesión del Concejo Municipal", href: "/concejo", linkLabel: "Ver fuente" }]} />
 */
export function Agenda({ title = "Agenda de hoy", items = AGENDA_ITEMS, linkLabel = "Detalles", className }: AgendaProps) {
  if (!items.length) return null;
  return (
    <section className={["ui-content", className].filter(Boolean).join(" ")} data-agenda>
      {title ? <h3>{title}</h3> : null}
      <ol>
        {items.map((item, i) => {
          const enlace = item.linkLabel || linkLabel;
          return (
            <li key={`${item.title}-${i}`}>
              <time dateTime={item.dateTime}>{item.time}</time>{" "}
              <span>{item.title}</span>
              {item.href && enlace ? <>{" "}<a href={item.href}>{enlace}</a></> : null}
            </li>
          );
        })}
      </ol>
    </section>
  );
}