import React from "react";
import { JDatomExtentionSet } from "../../types/interface";
import { isEmpty, s4 } from "../../utils/utils";
import JDcard, { CardProps } from "../cards/Card";
import { JDpreloader } from "../components";

interface IProps extends CardProps, JDatomExtentionSet {
    count?: number;
    loading: boolean | any;
    loadingSize?: "small" | "large" | "tiny" | "medium"
}

export const LoadingCard: React.FC<IProps> = ({ count = 1, loading, loadingSize = "medium", ...props }) => {
    const empty = typeof loading === "boolean" ? loading : isEmpty(loading)

    const Loading = () => <JDcard flex={{ center: true }} {...props}>
        <JDpreloader size={loadingSize} loading={empty} />
    </JDcard>;

    if (!empty) return null;
    if (count === 1) return <Loading />
    const loads = Array(count).fill("").map(() => s4())
    return <div>{loads.map((key) => <Loading key={key} />)}</div>
}

export default LoadingCard