Ruta.

<figure class="ui-sample ui-map" data-map-route="true"><div class="ui-map__canvas" role="img" aria-label="Ruta principal entre Plaza de Maipú y Los Héroes"><svg viewBox="0 0 320 120" aria-hidden="true"><path class="map-route" d="M20 90C80 20 160 110 300 30" vector-effect="non-scaling-stroke"></path><circle class="map-node" cx="20" cy="90" r="3" vector-effect="non-scaling-stroke"></circle><circle class="map-node" cx="300" cy="30" r="3" vector-effect="non-scaling-stroke"></circle></svg></div><figcaption>Fuente: Red Movilidad · 13,2 km · 38 min · <a href="#pasos">Ver recorrido textual</a></figcaption></figure>

<figure class="ui-sample ui-map border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-map-route="true"><div class="ui-map__canvas" role="img" aria-label="Ruta principal entre Plaza de Maipú y Los Héroes"><svg class="h-auto w-full" viewBox="0 0 320 120" aria-hidden="true"><path class="map-route" d="M20 90C80 20 160 110 300 30" vector-effect="non-scaling-stroke"></path><circle class="map-node" cx="20" cy="90" r="3" vector-effect="non-scaling-stroke"></circle><circle class="map-node" cx="300" cy="30" r="3" vector-effect="non-scaling-stroke"></circle></svg></div><figcaption class="text-sm text-slate-600">Fuente: Red Movilidad · 13,2 km · 38 min · <a class="underline underline-offset-4" href="#pasos">Ver recorrido textual</a></figcaption></figure>

import type { ReactNode } from "react";

export interface MapRouteProps {
  /** Texto alternativo del lienzo (`aria-label` del elemento con `role="img"`): qué ruta es y entre qué puntos. */
  alt?: string;
  /** Trazado dentro del SVG, en coordenadas del `viewBox`: el recorrido como `<path className="map-route">` y el origen, el destino y las paradas como `<circle className="map-node">`. Sin él se dibuja el de la muestra. */
  children?: ReactNode;
  /** Sistema de coordenadas del SVG; el trazado se expresa en estas unidades. */
  viewBox?: string;
  /** Fuente de los datos, con su prefijo («Fuente: …»); vacía la omite. */
  source?: string;
  /** Distancia total, ya formateada («13,2 km»); vacía la omite. */
  distance?: string;
  /** Duración estimada, ya formateada («38 min»); vacía la omite. */
  duration?: string;
  /** Texto del enlace al recorrido en texto; vacío lo omite. */
  linkLabel?: string;
  /** Destino del enlace: la lista de pasos de la ruta. */
  href?: string;
  className?: string;
}

const TRAZADO = (
  <>
    <path className="map-route" d="M20 90C80 20 160 110 300 30" vectorEffect="non-scaling-stroke"></path>
    <circle className="map-node" cx="20" cy="90" r="3" vectorEffect="non-scaling-stroke"></circle>
    <circle className="map-node" cx="300" cy="30" r="3" vectorEffect="non-scaling-stroke"></circle>
  </>
);

/**
 * Mapa con el trazado de una ruta, su distancia y duración, y un enlace al recorrido en texto; se usa para mostrar un viaje entre dos puntos.
 *
 * El SVG va oculto a lectores de pantalla: el lienzo se nombra con `alt` y el recorrido textual es la lectura accesible de los pasos.
 *
 * @example <MapRoute alt="Ruta alternativa entre Plaza de Maipú y Los Héroes" distance="14,8 km" duration="42 min" href="#pasos-alternativa" />
 * @example <MapRoute alt="Ruta entre Estación Central y Maipú" viewBox="0 0 640 240"><path className="map-route" d="M48 192C140 180 192 116 300 124S500 84 592 48" /><circle className="map-node" cx="48" cy="192" r="6" /><circle className="map-node" cx="592" cy="48" r="6" /></MapRoute>
 */
export function MapRoute({
  alt = "Ruta principal entre Plaza de Maipú y Los Héroes",
  children = TRAZADO,
  viewBox = "0 0 320 120",
  source = "Fuente: Red Movilidad",
  distance = "13,2 km",
  duration = "38 min",
  linkLabel = "Ver recorrido textual",
  href = "#pasos",
  className,
}: MapRouteProps) {
  const texto = [source, distance, duration].filter(Boolean).join(" · ");
  const enlace = linkLabel ? <a href={href}>{linkLabel}</a> : null;
  return (
    <figure className={["ui-map", className].filter(Boolean).join(" ")} data-map-route>
      <div className="ui-map__canvas" role="img" aria-label={alt}>
        <svg viewBox={viewBox} aria-hidden="true">{children}</svg>
      </div>
      {texto || enlace ? (
        <figcaption>
          {texto || null}
          {texto && enlace ? " · " : null}
          {enlace}
        </figcaption>
      ) : null}
    </figure>
  );
}