'use client'
// src/components/three/SceneWrapper.tsx
// Input: children (r3f scene objects), autoRotate, enableInteraction
// Output: dynamic import of _Scene (ssr:false) with skeleton fallback
// Rationale: ensures Canvas never runs on server; fallback visible until hydration

import dynamic from 'next/dynamic'
import { SceneLoader } from './Loader'

const Scene = dynamic(() => import('./_Scene'), {
  ssr: false,
  loading: () => <SceneLoader />,
})

export interface SceneWrapperProps {
  children?: React.ReactNode
  autoRotate?: boolean
  autoRotateSpeed?: number
  enableInteraction?: boolean
  className?: string
  style?: React.CSSProperties
}

export function SceneWrapper({
  children,
  autoRotate = false,
  autoRotateSpeed = 0.5,
  enableInteraction = true,
  className,
  style,
}: SceneWrapperProps) {
  return (
    <div
      className={className}
      style={{ width: '100%', height: '100%', ...style }}
    >
      <Scene
        autoRotate={autoRotate}
        autoRotateSpeed={autoRotateSpeed}
        enableInteraction={enableInteraction}
      >
        {children}
      </Scene>
    </div>
  )
}