"use client";
import { useEffect, useRef } from "react";

import L from "leaflet";
import "leaflet/dist/leaflet.css";
import ToastCard from "./toast/ToastCard";
import { Toast, ToastBar, Toaster, toast } from "react-hot-toast";

export default () => {
	const mapRef = useRef<HTMLDivElement>(null);

	useEffect(() => {
		if (!mapRef.current) return;

		// Initialisiere die Leaflet-Karte
		const map = L.map(mapRef.current).setView([51.1657, 10.4515], 6); // Deutschland

		// OpenStreetMap Tile Layer hinzufügen
		L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
			attribution:
				'&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> contributors',
		}).addTo(map);

		return () => {
			map.remove(); // Karte beim Unmounten bereinigen
		};
	}, []);

	return (
		<div className="relative w-full h-full">
			<div>
				<Toaster
					containerStyle={{
						top: 150,
						left: 20,
						right: 20,
					}}
					toastOptions={{
						style: {
							background: "var(--color-base-100)",
							color: "var(--color-base-content)",
						},
					}}
					position="top-left"
					reverseOrder={false}
				/>
			</div>
			<div
				ref={mapRef}
				className="w-full h-full rounded-lg shadow-lg"
				style={{
					filter:
						"invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
					background: "#000 !important",
				}}
			/>
			<ToastCard />
		</div>
	);
};