Welcome

import React, { useEffect, useState } from "react"
import confetti from "canvas-confetti"
import { Button } from "@/components/ui/button"
import { Sparkles, PartyPopper } from "lucide-react"

export default function ConfettiCelebration() {
  const [count, setCount] = useState(0)

  const triggerConfetti = () => {
    const duration = 3 * 1000
    const animationEnd = Date.now() + duration
    const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }

    const randomInRange = (min, max) => {
      return Math.random() * (max - min) + min
    }

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

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

      const particleCount = 50 * (timeLeft / duration)
      
      // fireworks
      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)

    setCount(prev => prev + 1)
  }

  useEffect(() => {
    // Initial confetti on load
    triggerConfetti()
  }, [])

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50 flex flex-col items-center justify-center p-8">
      <div className="text-center space-y-6 max-w-md">
        <div className="flex justify-center">
          <PartyPopper className="w-16 h-16 text-purple-500 animate-bounce" />
        </div>
        
        <h1 className="text-4xl font-bold text-gray-800">
          Celebration Time!
        </h1>
        
        <p className="text-lg text-gray-600">
          Click the button below to trigger a spectacular confetti celebration. 
          You've launched {count} celebration{count !== 1 ? 's' : ''}!
        </p>

        <Button 
          onClick={triggerConfetti}
          size="lg"
          className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-semibold px-8 py-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-200"
        >
          <Sparkles className="w-5 h-5 mr-2" />
          Launch Confetti
        </Button>

        <div className="text-sm text-gray-500">
          Tip: Try clicking multiple times for different patterns!
        </div>
      </div>
    </div>
  )
}