'use client'

import dynamic from 'next/dynamic'

const VirtualeyesViewer = dynamic(
  () => import('@/components/virtualeyes/panorama-viewer').then(m => m.VirtualeyesViewer),
  { ssr: false, loading: () => <div className="h-[500px] bg-gray-100 rounded-2xl flex items-center justify-center text-gray-400">جاري تحميل الجولة 360°...</div> }
)

const PropertyMap = dynamic(
  () => import('@/components/map/property-map').then(m => m.PropertyMap),
  { ssr: false, loading: () => <div className="h-[400px] bg-gray-100 rounded-xl flex items-center justify-center text-gray-400">جاري تحميل الخريطة...</div> }
)

type Property = {
  id: string; title: string; price: number; city: string; neighborhood: string
  address?: string; hasVirtualTour?: boolean; images?: string[]
  virtualTour?: any; agent?: any
}

export function PropertyVirtualTour({ scenes, propertyId }: { scenes: any[]; propertyId: string }) {
  if (!scenes.length) return null
  return <VirtualeyesViewer scenes={scenes} propertyId={propertyId} />
}

export function PropertyLocationMap({ property }: { property: Property }) {
  return (
    <PropertyMap
      properties={[property as any]}
      height="400px"
      selectedId={property.id}
    />
  )
}