"use client";

import { MapContainer, TileLayer, Marker, Popup, LayersControl } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { useEffect } from 'react';
import { mapLayers } from './mapLayers';

// Fix for default markers in react-leaflet
const fixLeafletIcons = () => {
  if (typeof window !== 'undefined') {
    const L = require('leaflet');
    
    delete L.Icon.Default.prototype._getIconUrl;
    L.Icon.Default.mergeOptions({
      iconRetinaUrl: '/leaflet/marker-icon-2x.png',
      iconUrl: '/leaflet/marker-icon.png',
      shadowUrl: '/leaflet/marker-shadow.png',
    });
  }
};

export default function EnhancedLeafletMap({ 
  center, 
  zoom = 13, 
  markers = [], 
  showLayerControl = true,
  defaultLayer = 'OpenStreetMap'
}) {
  useEffect(() => {
    fixLeafletIcons();
  }, []);

  const { BaseLayer } = LayersControl;

  return (
    <MapContainer 
      center={center} 
      zoom={zoom} 
      style={{ height: '100%', width: '100%' }}
      scrollWheelZoom={true}
    >
      {showLayerControl ? (
        <LayersControl position="topright">
          {mapLayers.base.map((layer, index) => (
            <BaseLayer 
              key={index} 
              checked={layer.checked || layer.name === defaultLayer} 
              name={layer.name}
            >
              <TileLayer
                attribution={layer.attribution}
                url={layer.url}
                maxZoom={layer.maxZoom}
                tileSize={layer.tileSize || 256}
              />
            </BaseLayer>
          ))}
        </LayersControl>
      ) : (
        // Default layer when no layer control
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      )}

      {markers.map((marker, index) => (
        <Marker key={index} position={marker.position}>
          {marker.popup && <Popup>{marker.popup}</Popup>}
        </Marker>
      ))}
    </MapContainer>
  );
}