'use client'

import dynamic from 'next/dynamic'
import type { MapListing } from './ListingsMap'

// Leaflet touches `window` at import time, so it can only load client-side.
// next/dynamic with ssr:false is only valid from a Client Component in the
// App Router, which is why this thin loader exists separately from the page.
const ListingsMap = dynamic(() => import('./ListingsMap'), {
  ssr: false,
  loading: () => <div className="w-full h-full animate-pulse bg-pine/5" />,
})

interface ListingsMapLoaderProps {
  listings: MapListing[]
  approvedLabel: string
  viewLabel: string
}

export default function ListingsMapLoader(props: ListingsMapLoaderProps) {
  return <ListingsMap {...props} />
}