import { LatLngTuple } from "leaflet";
import { useTranslation } from "react-i18next";
import { MapContainer, TileLayer } from "react-leaflet";

import "leaflet/dist/leaflet.css";

import { MapOverlay } from "./MapOverlay";
import { ObjectMarkerList } from "./ObjectMarkerList";

export function GlobalMap() {
	const defaultPosition: LatLngTuple = [52.285577, 76.940722];
	const defaultZoom = 12;
	const { t } = useTranslation();

	return (
		<MapContainer
			center={defaultPosition}
			zoom={defaultZoom}
			scrollWheelZoom={true}
			className="h-full w-full markercluster-map"
			zoomControl={false}
		>
			<TileLayer
				attribution={t("mapAttribution")}
				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
			/>

			<ObjectMarkerList />

			<MapOverlay />
		</MapContainer>
	);
}
