'use client'

import dynamic from 'next/dynamic'
import { Loader2 } from 'lucide-react'

export type { GlobePoint } from './globe-visualization'

const GlobeVisualization = dynamic(
  () => import('./globe-visualization').then((m) => m.GlobeVisualization),
  {
    ssr: false,
    loading: () => (
      <div className="flex items-center justify-center h-full w-full min-h-[300px]">
        <div className="flex flex-col items-center gap-3 text-muted-foreground">
          <Loader2 className="h-8 w-8 animate-spin" />
          <span className="text-sm">Loading globe...</span>
        </div>
      </div>
    ),
  }
)

export { GlobeVisualization as GlobeLoader }