"use client";

/**
 * MassingViewer — the only entry point the drawer imports for the 3D massing
 * sandbox. Loads MassingScene (Three.js) client-side only via
 * `dynamic(ssr:false)` so WebGL/Three.js never run on the server, with a dark
 * skeleton while the chunk loads. The drawer gates its children behind
 * `{open && ...}`, so the scene mounts on open and the MassingScene effect
 * cleanup disposes the renderer/scene on close.
 */

import dynamic from "next/dynamic";

import styles from "@/app/site-finder/analysis/[cad]/ptica/ptica.module.css";
import type { MassingSceneProps } from "@/components/site-finder/ptica/massing/MassingScene";

const MassingScene = dynamic(
  () => import("@/components/site-finder/ptica/massing/MassingScene"),
  {
    ssr: false,
    loading: () => (
      <div className={styles.massingViewport}>
        <div className={styles.massingSkeleton} aria-hidden="true">
          Загрузка 3D-сцены…
        </div>
      </div>
    ),
  },
);

export function MassingViewer(props: MassingSceneProps): React.JSX.Element {
  return <MassingScene {...props} />;
}

export default MassingViewer;