'use client'

import { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { PerformanceMonitor } from '@react-three/drei'
import { useState } from 'react'
import * as THREE from 'three'
import { ParticleField } from './ParticleField'

interface Props {
  mouseX: number
  mouseY: number
  active: boolean
}

export function HeroCanvas({ mouseX, mouseY, active }: Props) {
  const [reduceQuality, setReduceQuality] = useState(false)

  return (
    <Canvas
      frameloop={active ? 'always' : 'never'}
      camera={{ position: [0, 0, 7], fov: 60, near: 0.1, far: 100 }}
      dpr={reduceQuality ? [1, 1] : [1, 2]}
      gl={{
        antialias: true,
        toneMapping: THREE.ACESFilmicToneMapping,
        toneMappingExposure: 1.2,
        alpha: true,
      }}
      style={{ position: 'absolute', inset: 0, background: 'transparent' }}
    >
      <PerformanceMonitor
        onDecline={() => setReduceQuality(true)}
        flipflops={3}
        threshold={0.75}
      >
        <Suspense fallback={null}>
          <ParticleField mouseX={mouseX} mouseY={mouseY} />
          <ambientLight intensity={0.2} />
          <pointLight position={[4, 4, 4]} intensity={2} color="#0044FF" />
          <pointLight position={[-4, -2, 2]} intensity={1} color="#00E5FF" />
        </Suspense>
      </PerformanceMonitor>
    </Canvas>
  )
}