import animationData from "@assets/lottie/confetti.json";
import { useEffect, useState } from "react";
import Lottie from "react-lottie";

const animationOptions = {
	loop: false,
	autoplay: true,
	animationData: animationData,
	renderSettings: {
		preserveAspectRatio: "xMidyMid slice",
	},
};

export const Confetti = () => {
	const [show, toggle] = useState<boolean>(false);

	useEffect(() => {
		toggle(true);

		const timeout = setTimeout(() => {
			toggle(false);
		}, 3000);

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

	if (!show) return null;
	return (
		<div className="bn-absolute bn-left-0 bn-top-0 bn-size-full">
			<Lottie options={animationOptions} />
		</div>
	);
};
