
import React, { useEffect, useRef } from 'react';
import lottie from 'lottie-web';
import styled from 'styled-components';
import defaultLoaderAnimation from './loader_3.json';

const LoaderWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: ${({ width }) => width}px;
  height: ${({ height }) => height}px;
`;

const PageLoader = ({ loaderAsset = defaultLoaderAnimation, width = 400, height = 400 }) => {
  const animationContainer = useRef(null);

  useEffect(() => {
    const anim = lottie.loadAnimation({
      container: animationContainer.current,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: loaderAsset
    });

    return () => anim.destroy(); // Cleanup animation on unmount
  }, [loaderAsset]);

  return (
    <LoaderWrapper ref={animationContainer} width={width} height={height} />
  );
};

export default PageLoader;
