"use client"

import { useState } from "react"

export function ConfettiEffect() {
  const [particles] = useState(() => Array.from({ length: 30 }))

  return (
    <div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
      {particles.map((_, i) => (
        <div
          key={i}
          className="absolute animate-confetti opacity-0"
          style={{
            left: `${Math.random() * 100}%`,
            top: "100%",
            backgroundColor: `hsl(${Math.floor(Math.random() * 360)}, 80%, 60%)`,
            width: `${Math.random() * 10 + 5}px`,
            height: `${Math.random() * 10 + 5}px`,
            borderRadius: "2px",
            animationDelay: `${Math.random() * 2}s`,
            animationDuration: `${Math.random() * 2 + 3}s`,
          }}
        />
      ))}
      <style jsx global>{`
        @keyframes confetti {
          0% {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
          }
          100% {
            transform: translateY(-100vh) rotate(720deg);
            opacity: 0;
          }
        }

        .animate-confetti {
          animation-name: confetti;
          animation-timing-function: ease-out;
          animation-fill-mode: forwards;
        }
      `}</style>
    </div>
  )
}
