Reproducción temporal.

<section class="ui-sample ui-map" data-map-playback="true"><div class="ui-actions" role="toolbar" aria-label="Reproducción temporal"><button class="btn btn--primary" type="button">Reproducir</button><button class="btn btn--secondary" type="button">Anterior</button><button class="btn btn--secondary" type="button">Siguiente</button><label>Velocidad <select class="input"><option>1×</option><option selected="">2×</option></select></label></div><time dateTime="2026-08-25T18:24:00-04:00">18:24 CLT</time><small>Fuente: cortes de DTPM · intervalo 5 min</small></section>

<section class="ui-sample ui-map border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-map-playback="true"><div class="ui-actions" role="toolbar" aria-label="Reproducción temporal"><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Reproducir</button><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Anterior</button><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Siguiente</button><label>Velocidad <select class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2"><option>1×</option><option selected="">2×</option></select></label></div><time dateTime="2026-08-25T18:24:00-04:00">18:24 CLT</time><small class="text-sm text-slate-600">Fuente: cortes de DTPM · intervalo 5 min</small></section>

import type { ChangeEventHandler, MouseEventHandler } from "react";

export interface MapPlaybackSpeed {
  /** Texto de la opción («2×»). */
  label: string;
  /** Valor de la opción si difiere del texto; sin él se usa `label`. */
  value?: string;
}

export interface MapPlaybackProps {
  /** Nombre accesible de la barra de controles. */
  toolbarLabel?: string;
  /** La animación está corriendo: el primer botón pasa a decir `pauseLabel`. */
  playing?: boolean;
  playLabel?: string;
  pauseLabel?: string;
  onPlay?: MouseEventHandler<HTMLButtonElement>;
  onPause?: MouseEventHandler<HTMLButtonElement>;
  /** Texto del botón que retrocede un cuadro; vacío lo oculta. */
  previousLabel?: string;
  onPrevious?: MouseEventHandler<HTMLButtonElement>;
  /** Texto del botón que avanza un cuadro; vacío lo oculta. */
  nextLabel?: string;
  onNext?: MouseEventHandler<HTMLButtonElement>;
  /** Rótulo del selector de velocidad. */
  speedLabel?: string;
  /** Velocidades disponibles; sin elementos no se muestra el selector. */
  speeds?: MapPlaybackSpeed[];
  /** Velocidad inicial de un selector no controlado (valor u opción). */
  defaultSpeed?: string;
  /** Velocidad de un selector controlado; va junto con `onSpeedChange`. */
  speed?: string;
  /** Se llama al cambiar la velocidad, esté controlado o no el selector. */
  onSpeedChange?: ChangeEventHandler<HTMLSelectElement>;
  /** Instante del cuadro visible en ISO 8601, con zona horaria. */
  dateTime?: string;
  /** Texto visible del instante del cuadro dentro de `<time>` («18:24 CLT»); vacío lo omite. */
  time?: string;
  /** Fuente de los datos, con su prefijo («Fuente: …»); vacía la omite. */
  source?: string;
  /** Nota tras la fuente (intervalo entre cuadros, fecha de corte); vacía la omite. */
  note?: string;
  className?: string;
}

const VELOCIDADES: MapPlaybackSpeed[] = [{ label: "1×" }, { label: "2×" }];

/**
 * Barra de reproducción de un mapa animado en el tiempo, con reproducir o pausar, cuadro anterior y siguiente, velocidad y la hora del cuadro visible.
 *
 * Sin estado interno: `playing` decide si el primer botón reproduce o pausa, y la página avanza los cuadros con `onNext` y `onPrevious`.
 *
 * @example <MapPlayback playing={corriendo} onPlay={reproducir} onPause={pausar} onNext={avanzar} onPrevious={retroceder} dateTime="2026-08-25T18:29:00-04:00" time="18:29 CLT" />
 */
export function MapPlayback({
  toolbarLabel = "Reproducción temporal",
  playing = false,
  playLabel = "Reproducir",
  pauseLabel = "Pausar",
  onPlay,
  onPause,
  previousLabel = "Anterior",
  onPrevious,
  nextLabel = "Siguiente",
  onNext,
  speedLabel = "Velocidad",
  speeds = VELOCIDADES,
  defaultSpeed = "2×",
  speed,
  onSpeedChange,
  dateTime = "2026-08-25T18:24:00-04:00",
  time = "18:24 CLT",
  source = "Fuente: cortes de DTPM",
  note = "intervalo 5 min",
  className,
}: MapPlaybackProps) {
  const controlado = speed !== undefined && onSpeedChange !== undefined;
  const pie = [source, note].filter(Boolean).join(" · ");
  return (
    <section className={["ui-map", className].filter(Boolean).join(" ")} data-map-playback>
      <div className="ui-actions" role="toolbar" aria-label={toolbarLabel}>
        <button className="btn btn--primary" type="button" onClick={playing ? onPause : onPlay}>{playing ? pauseLabel : playLabel}</button>
        {previousLabel ? <button className="btn btn--secondary" type="button" onClick={onPrevious}>{previousLabel}</button> : null}
        {nextLabel ? <button className="btn btn--secondary" type="button" onClick={onNext}>{nextLabel}</button> : null}
        {speeds.length ? (
          <label>
            {speedLabel ? `${speedLabel} ` : null}
            <select className="input" onChange={onSpeedChange} {...(controlado ? { value: speed } : { defaultValue: speed ?? defaultSpeed })}>
              {speeds.map((opcion, i) => (
                <option key={i} value={opcion.value}>{opcion.label}</option>
              ))}
            </select>
          </label>
        ) : null}
      </div>
      {time ? <time dateTime={dateTime}>{time}</time> : null}
      {pie ? <small>{pie}</small> : null}
    </section>
  );
}