"use client";

import {
  DotLottieReact,
  DotLottieReactProps,
} from "@lottiefiles/dotlottie-react";
import clsx from "clsx";

import { useLottie } from "@/hooks/lottie/useLottie";
import { ELottieKeys } from "@/shared/constants/lottie";

interface LottieAnimationProps {
  loadKey: ELottieKeys;
  width?: number | string;
  height?: number | string;
  className?: string;
  animationProps?: DotLottieReactProps;
}

export default function LottieAnimation({
  loadKey,
  width = 80,
  height = 80,
  className,
  animationProps,
}: LottieAnimationProps) {
  const { animationData } = useLottie({
    loadKey,
  });

  return (
    <div style={{ width: width, height: height }} className={className}>
      {animationData && (
        <DotLottieReact
          style={{ width: width, height: height }}
          data={animationData}
          autoplay
          width={width}
          height={height}
          {...animationProps}
          className={clsx(animationProps?.className, "ym-hide-content")}
        />
      )}
    </div>
  );
}