import { Suspense, type MutableRefObject, type RefObject } from 'react'
import { Canvas } from '@react-three/fiber'
import type { RavenFx } from './ravenFx'
import { RavenFlock } from './RavenFlock'

type RavenBurstCanvasProps = {
  fxRef: MutableRefObject<RavenFx>
  wrapRef: RefObject<HTMLDivElement | null>
}

export function RavenBurstCanvas({ fxRef, wrapRef }: RavenBurstCanvasProps) {
  return (
    <div className="gate-transit__ravens" ref={wrapRef}>
      <Canvas
        dpr={[1, 1.25]}
        gl={{
          alpha: true,
          antialias: false,
          powerPreference: 'high-performance',
          stencil: false,
          depth: true,
        }}
        camera={{ position: [0, 0, 5.2], fov: 42, near: 0.05, far: 40 }}
        style={{ background: 'transparent' }}
      >
        <Suspense fallback={null}>
          <RavenFlock fx={fxRef} />
        </Suspense>
      </Canvas>
    </div>
  )
}