"use client";
import L from "leaflet";
import maplibregl from "maplibre-gl";
import { useEffect } from "react";
import { useMap } from "react-leaflet";

import "@maplibre/maplibre-gl-leaflet";

/**
 * Capa de mapa VECTORIAL estilo Uber (CARTO Positron / Dark Matter) sobre Leaflet.
 * Da el look plateado y limpio con calles nítidas y zoom suave, en vez de tiles rasterizados.
 * El plugin `maplibre-gl-leaflet` necesita `maplibregl` disponible como global.
 */
export function MapLibreLayer({ style }: { style: string }) {
  const map = useMap();

  useEffect(() => {
    (window as unknown as { maplibregl: typeof maplibregl }).maplibregl = maplibregl;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const layer = (L as any).maplibreGL({ style, attribution: "© OpenStreetMap © CARTO" });
    layer.addTo(map);
    return () => {
      map.removeLayer(layer);
    };
  }, [map, style]);

  return null;
}