import { useEffect } from "react";

type ConfettiBurstProps = {
  count?: number;
};

export const ConfettiBurst = ({ count = 30 }: ConfettiBurstProps) => {
  useEffect(() => {
    const timeout = setTimeout(() => {
      const container = document.getElementById("confetti-container");
      if (container) container.innerHTML = "";
    }, 1200);

    return () => clearTimeout(timeout);
  }, []);

  return (
    <div
      id="confetti-container"
      className="pointer-events-none absolute inset-0 overflow-hidden"
    >
      {Array.from({ length: count }).map((_, i) => (
        <span
          key={i}
          className="confetti"
          style={{
            left: `${Math.random() * 100}%`,
            backgroundColor: CONFETTI_COLORS[i % CONFETTI_COLORS.length],
            animationDelay: `${Math.random() * 0.2}s`,
            transform: `rotate(${Math.random() * 360}deg)`,
          }}
        />
      ))}
    </div>
  );
};

const CONFETTI_COLORS = [
  "#a855f7", // purple
  "#6366f1", // indigo
  "#ec4899", // pink
  "#22c55e", // green
  "#facc15", // yellow
];