'use client'

import { useEffect } from 'react'
import { Particles } from '@tsparticles/react'
import { particlesConfig } from '@/lib/particles-config'

export default function ParticleBackground({ className }: { className?: string }) {
  useEffect(() => {
    let particlesContainer: any = null

    const handleVisibilityChange = () => {
      if (particlesContainer) {
        if (document.hidden) {
          particlesContainer.pause()
        } else {
          particlesContainer.play()
        }
      }
    }

    document.addEventListener('visibilitychange', handleVisibilityChange)

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange)
    }
  }, [])

  return (
    <Particles
      id="tsparticles"
      className={className}
      options={particlesConfig}
    />
  )
}