Marcador.

<figure class="ui-sample ui-map" data-map-marker="true"><div class="ui-map__canvas" role="img" aria-label="Mapa de buses activos por comuna, con Santiago seleccionada"><button class="ui-map__marker" type="button" aria-label="Santiago, 1.284 buses">1</button></div><figcaption>Fuente: DTPM · corte 25 ago 2026, 18:24 CLT</figcaption></figure>

<figure class="ui-sample ui-map border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-map-marker="true"><div class="ui-map__canvas" role="img" aria-label="Mapa de buses activos por comuna, con Santiago seleccionada"><button class="ui-map__marker border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-label="Santiago, 1.284 buses">1</button></div><figcaption class="text-sm text-slate-600">Fuente: DTPM · corte 25 ago 2026, 18:24 CLT</figcaption></figure>

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

export interface MapMarkerProps {
  /** Texto alternativo del lienzo del mapa (`aria-label` del elemento con `role="img"`): qué muestra. */
  alt?: string;
  /** Contenido del lienzo (teselas o SVG); se dibuja antes del marcador. En un SVG propio, las zonas llevan `map-zone map-zone--N` (N de 1 a 4), el trazado `map-route` y los puntos `map-node`. */
  children?: ReactNode;
  /** Nombre del lugar marcado (paradero, estación, comuna); sin nombre ni valor, el botón se nombra por su símbolo. */
  label?: string;
  /** Valor del lugar, ya formateado y con unidad («1.284 buses»); se lee junto al nombre. */
  value?: string;
  /** Símbolo visible dentro del marcador: un número o una letra corta. */
  symbol?: string;
  /** Se llama al pulsar el marcador. */
  onClick?: MouseEventHandler<HTMLButtonElement>;
  /** Fuente de los datos, con su prefijo («Fuente: …»); vacía la omite. */
  source?: string;
  /** Nota tras la fuente (fecha de corte, criterio); vacía la omite. */
  note?: string;
  className?: string;
}

/**
 * Mapa con un marcador seleccionado cuyo nombre y valor quedan disponibles para lectores de pantalla; se usa para destacar un punto sobre el lienzo.
 *
 * El marcador es un botón: su nombre accesible es «nombre, valor» y el símbolo visible no se lee.
 *
 * @example <MapMarker label="Estación Central" value="842 buses" symbol="2" onClick={abrirFicha} />
 * @example <MapMarker alt="Mapa de buses activos por comuna" label="Maipú" value="1.050 buses">{capaComunas}</MapMarker>
 */
export function MapMarker({
  alt = "Mapa de buses activos por comuna, con Santiago seleccionada",
  children,
  label = "Santiago",
  value = "1.284 buses",
  symbol = "1",
  onClick,
  source = "Fuente: DTPM",
  note = "corte 25 ago 2026, 18:24 CLT",
  className,
}: MapMarkerProps) {
  const pie = [source, note].filter(Boolean).join(" · ");
  const nombre = [label, value].filter(Boolean).join(", ");
  return (
    <figure className={["ui-map", className].filter(Boolean).join(" ")} data-map-marker>
      <div className="ui-map__canvas" role="img" aria-label={alt}>
        {children}
        <button className="ui-map__marker" type="button" aria-label={nombre || undefined} onClick={onClick}>{symbol}</button>
      </div>
      {pie ? <figcaption>{pie}</figcaption> : null}
    </figure>
  );
}