import React, { forwardRef } from "react";
import classNames from "classnames";
import { tokens } from "../../style-dictionary/dist/tokens";
import { bemHOF } from "../../utilities";
import { Box } from "../Box";

export interface LoadingDotsProps {
  size?: number;
  spacing?: number;
  bounce?: boolean;
  color?: string;
  className?: string;
  style?: React.CSSProperties;
}

const cn = bemHOF("LoadingDots");

const LoadingDot = ({
  size = 4,
  color = tokens.color.gray["500"],
}: {
  size?: number;
  color?: string;
}) => (
  <Box
    as="span"
    className={cn({ e: "dot" })}
    style={{
      backgroundColor: color,
      height: `${size}px`,
      width: `${size}px`,
    }}
  />
);

export const LoadingDots = forwardRef<HTMLDivElement, LoadingDotsProps>(
  (
    {
      size = 4,
      spacing = 2,
      bounce = false,
      color = tokens.color.gray["500"],
      className,
      style,
    },
    ref,
  ) => {
    return (
      <Box
        ref={ref}
        className={classNames(cn(), bounce && cn({ m: "bounce" }), className)}
        style={{
          ...style,
          gap: `${spacing}px`,
        }}
      >
        <LoadingDot size={size} color={color} />
        <LoadingDot size={size} color={color} />
        <LoadingDot size={size} color={color} />
      </Box>
    );
  },
);