import React, { useEffect } from 'react';
import confetti from 'canvas-confetti';

const ConfettiExplosion: React.FC = () => {
    useEffect(() => {
        const duration = 3 * 1000;
        const animationEnd = Date.now() + duration;
        const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 1119999 };

        const interval: NodeJS.Timeout = setInterval(() => {
            const timeLeft = animationEnd - Date.now();

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

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

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

    return null; // This component renders nothing visible
};

export default ConfettiExplosion;