"use client";
import { usePannelStore } from "_store/pannelStore";
import { useEffect } from "react";
import { TileLayer, useMap } from "react-leaflet";

export const BaseMaps = () => {
	const map = useMap();
	const isPannelOpen = usePannelStore((state) => state.isOpen);

	useEffect(() => {
		setTimeout(() => {
			map.invalidateSize();
		}, 600);
	}, [isPannelOpen]);

	return (
		<>
			<TileLayer
				attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
			/>
			<TileLayer
				attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
				className="invert-100 grayscale"
			/>
		</>
	);
};