import React, { Suspense, lazy } from 'react';
import { Skeleton } from '@/components/ui/skeleton';

// Use direct Leaflet implementation instead of react-leaflet to avoid render2 error
const LeafletMapDirect = lazy(() => import('./LeafletMapDirect'));

export interface PlaceData {
  id: string;
  lat: number;
  lng: number;
  title: string;
  description?: string;
}

export interface LeafletMapProps {
  places?: PlaceData[];
  className?: string;
  onMarkerClick?: (placeId: string) => void;
  onMarkerHover?: (placeId: string | null) => void;
  hoveredPlaceId?: string | null;
  selectedPlaceId?: string | null;
  activeDayId?: string | null;
  showPolyline?: boolean;
  center?: { lat: number; lng: number };
}

const LeafletMapWrapper: React.FC<LeafletMapProps> = (props) => {
  return (
    <Suspense 
      fallback={
        <div className={props.className || "w-full h-full"} style={{ minHeight: '400px' }}>
          <Skeleton className="w-full h-full bg-muted" />
        </div>
      }
    >
      <LeafletMapDirect {...props} />
    </Suspense>
  );
};

export default LeafletMapWrapper;
