breakpilot-lehrer/studio-v2/components/CityMapLeaflet.tsx

'use client'

import { useEffect } from 'react'
import { MapContainer, TileLayer, Marker, useMapEvents, useMap } from 'react-leaflet'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

// Fix für Leaflet Marker Icons in Next.js
const DefaultIcon = L.icon({
  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
  iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
})

L.Marker.prototype.options.icon = DefaultIcon

interface CityMapLeafletProps {
  center: { lat: number; lng: number }
  zoom: number
  markerPosition: [number, number] | null
  onMapClick: (lat: number, lng: number) => void
  isDark: boolean
}

// Komponente für Klick-Events
function MapClickHandler({ onMapClick }: { onMapClick: (lat: number, lng: number) => void }) {
  useMapEvents({
    click: (e) => {
      onMapClick(e.latlng.lat, e.latlng.lng)
    },
  })
  return null
}

// Komponente um Karte neu zu zentrieren
function MapCenterUpdater({ center, zoom }: { center: { lat: number; lng: number }; zoom: number }) {
  const map = useMap()

  useEffect(() => {
    map.setView([center.lat, center.lng], zoom)
  }, [map, center.lat, center.lng, zoom])

  return null
}

export default function CityMapLeaflet({
  center,
  zoom,
  markerPosition,
  onMapClick,
  isDark
}: CityMapLeafletProps) {
  return (
    <MapContainer
      center={[center.lat, center.lng]}
      zoom={zoom}
      style={{ height: '100%', width: '100%' }}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        url={isDark
          ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
          : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        }
      />
      {markerPosition && (
        <Marker position={markerPosition} icon={DefaultIcon} />
      )}
      <MapClickHandler onMapClick={onMapClick} />
      <MapCenterUpdater center={center} zoom={zoom} />
    </MapContainer>
  )
}