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

import L from "leaflet";
import "leaflet/dist/leaflet.css";

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 ref={mapRef} className="w-full h-full rounded-lg shadow-lg" />;
};