import Lottie from "lottie-react";
import animation from "../../assets/animations/nodata.json";
import Typography from "../Typography/Typography";

type Props = {
  title?: string;
  description?: string;
  className?: string;
  animationSize?: "sm" | "md" | "lg";
};

export const NoData = ({
  title,
  className = "",
  animationSize = "md",
}: Props) => {
  const sizeMap = {
    sm: "w-24 h-24",
    md: "w-32 h-32",
    lg: "w-48 h-48",
  };

  return (
    <div
      className={`w-full flex flex-col items-center justify-center p-6 ${className}`}
    >
      <div className={`${sizeMap[animationSize]} mb-4`}>
        <Lottie
          animationData={animation}
          loop={true}
          className="drop-shadow-lg"
        />
      </div>

      <div className="text-center max-w-md">
        <Typography
          color="text-gray-700 dark:text-gray-200 select-none"
          variant="h6"
          className="font-semibold  mb-2"
        >
          {title || "اطلاعات موجود نیست!"}
        </Typography>
      </div>
    </div>
  );
};
