"use client";

import { useEffect, useState } from "react";

import { LottieAnimation } from "@/components/widgets";
import { ELottieKeys } from "@/shared/constants/lottie";

import styles from "./LottieAnimations.module.scss";

export default function LottieAnimations() {
    const [isConfettiVisible, setIsConfettiVisible] = useState(false);

    useEffect(() => {
        const timer = setTimeout(() => {
            setIsConfettiVisible(true);
        }, 2000);
        return () => clearTimeout(timer);
    }, []);

    return (
        <>
            <LottieAnimation
                loadKey={ELottieKeys.loaderCheckMark2}
                width={100}
                height={100}
                animationProps={{
                    style: {
                        backgroundColor: "transparent"
                    }
                }}
            />
            {isConfettiVisible &&
                <LottieAnimation
                    loadKey={ELottieKeys.confetti}
                    width={"100dvw"}
                    height={"100dvh"}
                    className={styles["lottie-animation-container-confetti"]}
                    animationProps={{
                        className: styles["lottie-animation-confetti"]
                    }}
                />
            }
        </>
    )
}