'use client'

import { useEffect, useState, lazy, Suspense } from 'react'
import { Delivery, Driver } from '@/lib/types'

interface Props {
  driver: Driver
  deliveries: Delivery[]
  currentTarget: Delivery | null
  routeHistory: { lat: number; lng: number }[]
}

// Loading fallback component
function MapLoadingFallback() {
  return (
    <div className="bg-gray-900 rounded-xl border border-gray-700 h-[300px] sm:h-[400px] lg:h-[500px] flex items-center justify-center">
      <p className="text-gray-400">Memuat peta...</p>
    </div>
  )
}

// Lazy load the actual map component
const LazyMap = lazy(() => import('./DeliveryMapInner'))

export default function DeliveryMap(props: Props) {
  const [isMounted, setIsMounted] = useState(false)

  useEffect(() => {
    setIsMounted(true)
  }, [])

  if (!isMounted) {
    return <MapLoadingFallback />
  }

  return (
    <Suspense fallback={<MapLoadingFallback />}>
      <LazyMap {...props} />
    </Suspense>
  )
}