import { lazy, Suspense } from 'react'
import type { ProjectsMapAllProps } from './ProjectsMapAll'
import type { ProjectsMapSingleProps } from './ProjectsMapSingle'

/**
 * بارگیری تنبل نقشه‌ها — بسته‌ی سنگین مپ‌لیبر فقط وقتی دانلود می‌شود که
 * واقعاً نقشه‌ای روی صفحه باشد؛ صفحه‌های بدون نقشه (مثل خانه) جریمه‌ی حجم
 * نمی‌پردازند. Import زیر فقط نوع است و باندل را سنگین نمی‌کند.
 */
const ProjectsMapAll = lazy(() => import('./ProjectsMapAll').then((module) => ({ default: module.ProjectsMapAll })))
const ProjectsMapSingle = lazy(() =>
  import('./ProjectsMapSingle').then((module) => ({ default: module.ProjectsMapSingle })),
)

/** جای‌نگهدار هم‌اندازه‌ی نقشه تا چیدمان هنگام بارگیری نلرزد */
function MapSkeleton({ className = '' }: { className?: string }) {
  return <div className={`animate-pulse rounded-3xl border border-ivory/10 bg-char/50 ${className}`} />
}

export function LazyProjectsMapAll(props: ProjectsMapAllProps) {
  return (
    <Suspense fallback={<MapSkeleton className={props.className} />}>
      <ProjectsMapAll {...props} />
    </Suspense>
  )
}

export function LazyProjectsMapSingle(props: ProjectsMapSingleProps) {
  return (
    <Suspense fallback={<MapSkeleton className={props.className} />}>
      <ProjectsMapSingle {...props} />
    </Suspense>
  )
}