"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"],
          }}
        />
      )}
    </>
  );
}
