Mapa coroplético.

<figure class="ui-sample ui-map" data-map-choropleth="true"><svg viewBox="0 0 320 120" role="img" aria-label="Pobreza por ingresos por comuna, 2022"><path class="map-zone map-zone--1" d="M40 18l68 8 14 68-72 9z" vector-effect="non-scaling-stroke"></path><path class="map-zone map-zone--3" d="M126 24l74-9 22 72-84 12z" vector-effect="non-scaling-stroke"></path><path class="map-zone map-zone--4" d="M205 18l62 16 12 58-53 10z" vector-effect="non-scaling-stroke"></path></svg><figcaption>Fuente: Ministerio de Desarrollo Social y Familia, estimación comunal · 3 tramos: menos de 5%, 5 a 10% y más de 10% · <a href="#tabla">Ver tabla</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-choropleth="true"><svg class="h-auto w-full" viewBox="0 0 320 120" role="img" aria-label="Pobreza por ingresos por comuna, 2022"><path class="map-zone map-zone--1" d="M40 18l68 8 14 68-72 9z" vector-effect="non-scaling-stroke"></path><path class="map-zone map-zone--3" d="M126 24l74-9 22 72-84 12z" vector-effect="non-scaling-stroke"></path><path class="map-zone map-zone--4" d="M205 18l62 16 12 58-53 10z" vector-effect="non-scaling-stroke"></path></svg><figcaption class="text-sm text-slate-600">Fuente: Ministerio de Desarrollo Social y Familia, estimación comunal · 3 tramos: menos de 5%, 5 a 10% y más de 10% · <a class="underline underline-offset-4" href="#tabla">Ver tabla</a></figcaption></figure>

import type { ReactNode } from "react";

export interface MapChoroplethZone {
  /** Geometría del territorio: el atributo `d` de un `<path>`, en coordenadas del `viewBox`. */
  d: string;
  /** Tramo de la escala, de menor (1) a mayor (4); pinta el territorio con `map-zone--N`. */
  level: 1 | 2 | 3 | 4;
  /** Nombre del territorio y su valor («Maipú: 6,1%»); va como `<title>` del `<path>`. */
  label?: string;
}

export interface MapChoroplethProps {
  /** Texto alternativo del mapa (`aria-label` del elemento con `role="img"`): qué variable se colorea y a qué escala territorial. */
  alt?: string;
  /** Territorios como datos; cada uno se dibuja como `<path class="map-zone map-zone--N">` con borde de grosor fijo en pantalla. Con `zones`, `children` se dibuja encima (rutas, puntos). */
  zones?: MapChoroplethZone[];
  /** Territorios dentro del SVG, en coordenadas del `viewBox`; cada `<path>` lleva `className="map-zone map-zone--N"` (N de 1 a 4) para tomar la paleta del kit. Sin `children` ni `zones` se dibujan los de la muestra. */
  children?: ReactNode;
  /** Sistema de coordenadas del SVG; los territorios se expresan en estas unidades. */
  viewBox?: string;
  /** Fuente de los datos, con su prefijo («Fuente: …»); vacía la omite. */
  source?: string;
  /** Escala de color y método de clasificación («5 clases por cuantiles»); vacío lo omite. */
  scale?: string;
  /** Texto del enlace a la tabla con los mismos datos; vacío lo omite. */
  linkLabel?: string;
  /** Destino del enlace: la tabla de datos del mapa. */
  href?: string;
  className?: string;
}

// Tres comunas en los tramos 1, 3 y 4: los mismos colores que map-swatch--low, --mid y --high de MapLegend.
const TERRITORIOS = (
  <>
    <path className="map-zone map-zone--1" d="M40 18l68 8 14 68-72 9z" vectorEffect="non-scaling-stroke"></path>
    <path className="map-zone map-zone--3" d="M126 24l74-9 22 72-84 12z" vectorEffect="non-scaling-stroke"></path>
    <path className="map-zone map-zone--4" d="M205 18l62 16 12 58-53 10z" vectorEffect="non-scaling-stroke"></path>
  </>
);

/**
 * Mapa coroplético en SVG que colorea territorios según un valor, con la fuente y el método de clasificación en el pie; se usa para comparar una tasa entre comunas o regiones.
 *
 * El SVG tiene `role="img"` y se nombra con `alt`; enlaza a una tabla con los mismos valores. La paleta son las clases `map-zone--1` a `map-zone--4`, de menor a mayor; `MapLegend` usa los mismos colores con `level`.
 *
 * @example <MapChoropleth alt="Tasa de desocupación por región" scale="4 clases por cuartiles" href="#tabla-desocupacion">{regiones}</MapChoropleth>
 * @example <MapChoropleth alt="Pobreza por ingresos por comuna" viewBox="0 0 640 240" zones={[{ d: "M40 40L180 24L200 116L60 132Z", level: 2, label: "Maipú" }, { d: "M180 24L340 16L352 100L200 116Z", level: 4, label: "Cerro Navia" }]} />
 */
export function MapChoropleth({
  alt = "Pobreza por ingresos por comuna, 2022",
  zones,
  children,
  viewBox = "0 0 320 120",
  source = "Fuente: Ministerio de Desarrollo Social y Familia, estimación comunal",
  scale = "3 tramos: menos de 5%, 5 a 10% y más de 10%",
  linkLabel = "Ver tabla",
  href = "#tabla",
  className,
}: MapChoroplethProps) {
  const texto = [source, scale].filter(Boolean).join(" · ");
  const enlace = linkLabel ? <a href={href}>{linkLabel}</a> : null;
  const dibujo = zones?.length ? (
    <>
      {zones.map((zona, i) => (
        <path key={i} className={`map-zone map-zone--${zona.level}`} d={zona.d} vectorEffect="non-scaling-stroke">
          {zona.label ? <title>{zona.label}</title> : null}
        </path>
      ))}
      {children}
    </>
  ) : children === undefined ? TERRITORIOS : children;
  return (
    <figure className={["ui-map", className].filter(Boolean).join(" ")} data-map-choropleth>
      <svg viewBox={viewBox} role="img" aria-label={alt}>{dibujo}</svg>
      {texto || enlace ? (
        <figcaption>
          {texto || null}
          {texto && enlace ? " · " : null}
          {enlace}
        </figcaption>
      ) : null}
    </figure>
  );
}