"use client"

import { useEffect, useState } from "react"
import { isDecember } from "@/lib/utils/christmas"

export function ChristmasDecorations() {
  const [snowflakes, setSnowflakes] = useState<Array<{ id: number; left: number; delay: number; duration: number }>>([])
  const [isDec, setIsDec] = useState(false)

  useEffect(() => {
    setIsDec(isDecember())
    
    if (isDecember()) {
      // Generate snowflakes
      const flakes = Array.from({ length: 30 }, (_, i) => ({
        id: i,
        left: Math.random() * 100,
        delay: Math.random() * 5,
        duration: 8 + Math.random() * 4,
      }))
      setSnowflakes(flakes)
    }
  }, [])

  if (!isDec) {
    return null
  }

  return (
    <div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
      {/* Snowflakes */}
      {snowflakes.map((flake) => (
        <div
          key={flake.id}
          className="absolute top-0 text-white/60 text-xs animate-snowflake"
          style={{
            left: `${flake.left}%`,
            animationDelay: `${flake.delay}s`,
            animationDuration: `${flake.duration}s`,
          }}
        >
          ❄
        </div>
      ))}
      
      {/* Twinkling stars in corners */}
      <div className="absolute top-4 left-4 text-yellow-300 animate-twinkle text-lg">
        ✨
      </div>
      <div className="absolute top-4 right-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '0.5s' }}>
        ✨
      </div>
      <div className="absolute bottom-4 left-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '1s' }}>
        ✨
      </div>
      <div className="absolute bottom-4 right-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '1.5s' }}>
        ✨
      </div>

      {/* Christmas tree emoji decorations */}
      <div className="absolute top-8 left-1/4 text-green-500/40 animate-sparkle text-xl" style={{ animationDelay: '2s' }}>
        🎄
      </div>
      <div className="absolute top-8 right-1/4 text-green-500/40 animate-sparkle text-xl" style={{ animationDelay: '3s' }}>
        🎄
      </div>
    </div>
  )
}