import clsx from "clsx";
import React from "react";
import styles from "./index.module.scss";

interface LoadingProps {
    className?: string; // 可选的 className 属性，用于传递额外的样式类名
    color?: string;
    width?: number;
    space?: number;
    point?: number;
    animationDuration?: number;
}

const Loading: React.FC<LoadingProps> = ({
    className,
    color,
    width = 5,
    point = 4,
    space = 2,
    animationDuration = 800,
}) => {
    const Point = ({ idx }: { idx: number }) => {
        return (
            <span
                style={{
                    backgroundColor: color,
                    width: `${width}px`,
                    height: `${width}px`,
                    animationDelay: `${pointTime * idx}ms`,
                    animationDuration: `${animationDuration}ms`,
                    margin: `0 ${space}px`,
                }}
            ></span>
        );
    };
    const pointTime = React.useMemo(() => {
        return animationDuration / 2 / point;
    }, [point, animationDuration]);

    const PointList = React.useCallback(() => {
        return Array.from({ length: point }, (_, index) => <Point key={index} idx={index}></Point>);
    }, [point]);

    return (
        <div className={clsx(styles.loading, className)}>
            <PointList></PointList>
        </div>
    );
};

export default Loading;