'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" />;
};