import { useEffect } from 'react'
import confetti from 'canvas-confetti'

export default function BirthdayBanner({ name = "Linh" }) {
  useEffect(() => {
    // Fire confetti on load
    const duration = 3 * 1000
    const animationEnd = Date.now() + duration
    const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }

    function randomInRange(min, max) {
      return Math.random() * (max - min) + min
    }

    const interval = setInterval(function() {
      const timeLeft = animationEnd - Date.now()

      if (timeLeft <= 0) {
        return clearInterval(interval)
      }

      const particleCount = 50 * (timeLeft / duration)
      confetti({
        ...defaults,
        particleCount,
        origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
      })
      confetti({
        ...defaults,
        particleCount,
        origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
      })
    }, 250)

    return () => clearInterval(interval)
  }, [])

  const handleClick = () => {
    confetti({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 }
    })
  }

  return (
    <header
      className="relative text-white py-16 md:py-24 cursor-pointer overflow-hidden"
      onClick={handleClick}
      style={{
        backgroundImage: `url(/images/1.jpeg)`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }}
    >
      <div className="absolute inset-0 bg-black/40"></div>
      <div className="relative z-10 max-w-4xl mx-auto text-center px-4">
        <h1 className="text-4xl md:text-6xl font-bold mb-4 animate-bounce">
          🎂 Happy birthday b {name}! 🎉
        </h1>
        <p className="text-xl md:text-2xl font-medium opacity-90">
          Chúc mừng sinh nhật! 
        </p>
        <p className="mt-4 text-lg opacity-75">
          (Click để ăn pháo bông vào mồm ✨)
        </p>
      </div>
    </header>
  )
}