"use client"

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

interface SnowLoaderProps {
  className?: string;
  count?: number;
}

export function SnowLoader({ className = "", count = 20 }: SnowLoaderProps) {
  const [snowflakes, setSnowflakes] = useState<Array<{ id: number; left: number; delay: number; duration: number; size: number }>>([])
  const [isDec, setIsDec] = useState(false)

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

  if (!isDec) {
    return null
  }

  return (
    <div className={`absolute inset-0 pointer-events-none overflow-hidden ${className}`}>
      {snowflakes.map((flake) => (
        <div
          key={flake.id}
          className="absolute top-0 text-white/70 text-xs animate-snowflake"
          style={{
            left: `${flake.left}%`,
            animationDelay: `${flake.delay}s`,
            animationDuration: `${flake.duration}s`,
            fontSize: `${flake.size}rem`,
          }}
        >
          ❄
        </div>
      ))}
    </div>
  )
}