"use client";

/**
 * Massing3DViewer — the only entry point the §7 «Концепция» result imports for
 * the 3D building-mass viewer. Loads Massing3DScene (Three.js) client-side only
 * via `dynamic(ssr:false)` so WebGL/Three.js never run on the server, with a grey
 * fade loader (no shimmer — ui-conventions) while the chunk loads.
 *
 * The parent (ConceptVariantsResult) renders the 3D tab conditionally, so the
 * scene mounts only when «Объём (3D)» is active and the Massing3DScene teardown
 * effect disposes the renderer/GPU resources when the user switches back to 2D.
 */

import dynamic from "next/dynamic";

import type { Massing3DSceneProps } from "./Massing3DScene";

const Massing3DScene = dynamic(() => import("./Massing3DScene"), {
  ssr: false,
  loading: () => (
    <div
      style={{
        height: 420,
        background: "var(--bg-card-alt)",
        border: "1px solid var(--border-card)",
        borderRadius: 12,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        color: "var(--fg-tertiary)",
        fontSize: 13,
      }}
    >
      Загрузка 3D-сцены…
    </div>
  ),
});

export function Massing3DViewer(props: Massing3DSceneProps): React.JSX.Element {
  return <Massing3DScene {...props} />;
}

export default Massing3DViewer;
