'use client'

import { useEffect, useState } from 'react'

export function FloatingElements() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
  const [isMounted, setIsMounted] = useState(false)

  useEffect(() => {
    setIsMounted(true)
    
    const handleMouseMove = (e: MouseEvent) => {
      setMousePosition({ x: e.clientX, y: e.clientY })
    }

    // Add a small delay to ensure proper hydration
    const timer = setTimeout(() => {
      if (typeof window !== 'undefined') {
        window.addEventListener('mousemove', handleMouseMove)
      }
    }, 100)

    return () => {
      clearTimeout(timer)
      if (typeof window !== 'undefined') {
        window.removeEventListener('mousemove', handleMouseMove)
      }
    }
  }, [])

  // Don't render on server side or immediately after mount
  if (!isMounted) {
    return null
  }

  const floatingItems = [
    { icon: '📸', size: 24, speed: 0.02, offset: { x: 100, y: 50 } },
    { icon: '🎵', size: 20, speed: 0.03, offset: { x: -80, y: 100 } },
    { icon: '📚', size: 22, speed: 0.025, offset: { x: 150, y: -30 } },
    { icon: '🎨', size: 26, speed: 0.015, offset: { x: -120, y: -80 } },
    { icon: '⭐', size: 18, speed: 0.04, offset: { x: 200, y: 120 } },
    { icon: '💎', size: 16, speed: 0.035, offset: { x: -200, y: 60 } }
  ]

  return (
    <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: -1 }}>
      {floatingItems.map((item, index) => (
        <div
          key={index}
          style={{
            position: 'absolute',
            fontSize: `${item.size}px`,
            opacity: 0.1,
            transform: `translate3d(${mousePosition.x * item.speed + item.offset.x}px, ${mousePosition.y * item.speed + item.offset.y}px, 0)`,
            transition: 'transform 0.5s ease-out',
            animation: `float-${index} ${3 + index * 0.5}s ease-in-out infinite`,
            left: `${20 + (index * 15)}%`,
            top: `${10 + (index * 12)}%`
          }}
        >
          {item.icon}
        </div>
      ))}
      
      <style jsx>{`
        ${floatingItems.map((_, index) => `
          @keyframes float-${index} {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-${10 + index * 2}px) rotate(${index % 2 === 0 ? 2 : -2}deg); }
          }
        `).join('')}
      `}</style>
    </div>
  )
}