import { useEffect } from "react";
import { MapContainer, TileLayer, Marker, useMap, useMapEvents } from "react-leaflet";
import L from "leaflet";
// Leaflet's default marker icons break under bundlers; build a crisp SVG pin.
const pinIcon = L.divIcon({
className: "",
html: ``,
iconSize: [26, 34],
});
const CARTO_DARK =
"https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png";
function ClickCapture({ onPick }: { onPick: (lat: number, lng: number) => void }) {
useMapEvents({
click(e) {
onPick(
Number(e.latlng.lat.toFixed(5)),
Number(e.latlng.lng.toFixed(5))
);
},
});
return null;
}
function Recenter({ lat, lng }: { lat: number; lng: number }) {
const map = useMap();
useEffect(() => {
map.setView([lat, lng], map.getZoom(), { animate: true });
}, [lat, lng, map]);
return null;
}
export function LocationPicker({
lat,
lng,
onPick,
}: {
lat: number;
lng: number;
onPick: (lat: number, lng: number) => void;
}) {
return (
);
}