/** Template: SceneCanvas
 *  Canvas React Three Fiber — orquestra cena, câmera e controles.
 *  Aceita children como organisms/atoms 3D.
 */
import { Canvas } from '@react-three/fiber'
import { OrbitControls, ScrollControls, Environment, Float } from '@react-three/drei'
import { ReactNode } from 'react'

interface SceneCanvasProps {
  children: ReactNode
  orbitControls?: boolean
  scrollPages?: number
  scrollDamping?: number
  environment?: string | null
}

export function SceneCanvas({
  children,
  orbitControls = false,
  scrollPages    = 5,
  scrollDamping  = 0.4,
  environment    = null,
}: SceneCanvasProps) {
  return (
    <Canvas
      shadows
      camera={{ fov: 60, near: 0.1, far: 100 }}
      gl={{ antialias: true, alpha: false }}
      dpr={[1, 2]}
    >
      {/* Cinemática de cor */}
      <color attach="background" args={['#050510']} />

      {/* Névoa para profundidade */}
      <fog attach="fog" args={['#050510', 8, 40]} />

      {environment && <Environment preset={environment} background />}
      {orbitControls && <OrbitControls enablePan={false} enableZoom={false} maxPolarAngle={Math.PI / 1.8} />}

      {/* Scroll driver — children recebem offset do scroll */}
      <ScrollControls pages={scrollPages} damping={scrollDamping}>
        {children}
      </ScrollControls>
    </Canvas>
  )
}