"use client"
import { useEffect, useRef } from "react";
import { Viewer } from "@photo-sphere-viewer/core";
import "@photo-sphere-viewer/core/index.css";

export default function Panorama360() {
  const viewerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!viewerRef.current) return;
    const viewer = new Viewer({
      container: viewerRef.current,

      panorama: "/assets/r&d/panaroma360.webp",

      defaultYaw: "0deg",
      defaultPitch: "0deg",

      mousewheel: false,

      touchmoveTwoFingers: false,

      navbar: [
        "zoom",
        "move",
        "fullscreen",
      ],
    });

    viewer.addEventListener('dblclick', ({ data }) => {
        viewer.animate({
            yaw: data.yaw,
            pitch: data.pitch,
            zoom: 100,
            speed: 1000,
        });
    });

    return () => {
      viewer.destroy();
    };
  }, []);

  return (
    <div   className="w-full h-[700px] rounded-2xl overflow-hidden shadow-2xl">
      <div ref={viewerRef} className="w-full h-full  cursor-pointer"></div>
    </div>
  );
}