"use client";

import { useEffect, useRef, useState } from "react";
import lottie from "lottie-web";
import loaderAnimation from "../../public/assets/lottie/loader.json";
import "./Preloader.css";

const Preloader = () => {
  const lottieRef = useRef(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!lottieRef.current) return;

    const animation = lottie.loadAnimation({
      container: lottieRef.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: loaderAnimation,
    });

    const timer = setTimeout(() => {
      setLoading(false);
    }, 3000);

    return () => {
      animation.destroy();
      clearTimeout(timer);
    };
  }, []);

  if (!loading) return null;

  return (
    <div className="website_preloader">
      <div ref={lottieRef} className="preloader_lottie" />
    </div>
  );
};

export default Preloader;
