'use client'

import React from 'react'
import { Pannellum } from 'pannellum-react'

export default function PannellumWrapper({ scene }: { scene: any }) {
  return (
    <Pannellum
      width="100%"
      height="100%"
      image={scene.panoramaUrl}
      pitch={10}
      yaw={180}
      hfov={110}
      autoLoad={true}
      compass={false}
      showZoomCtrl={false}
      showFullscreenCtrl={false}
      mouseZoom={true}
    >
      {scene.hotspots?.map((hotspot: any, index: number) => (
        <Pannellum.Hotspot
          key={index}
          type={hotspot.type || "info"}
          pitch={hotspot.pitch}
          yaw={hotspot.yaw}
          text={hotspot.text}
          URL={hotspot.url}
        />
      ))}
    </Pannellum>
  )
}