import type { RefAttributes } from "react";
import classNames from "classnames/dedupe";
import { loading } from "@simplybusiness/icons";
import type { IconProps } from "../Icon";
import { Icon } from "../Icon";
import "./LoadingIndicator.css";

export interface LoadingIndicatorProps
  extends RefAttributes<SVGSVGElement>, IconProps {}

const LoadingIndicator = ({ ref, ...props }: LoadingIndicatorProps) => {
  const { icon = loading, ...otherProps } = props;

  const classes = classNames(
    "mobius",
    "mobius-loading-indicator",
    otherProps.className,
  );

  return (
    <Icon icon={icon} spin ref={ref} {...otherProps} className={classes} />
  );
};

LoadingIndicator.displayName = "LoadingIndicator";
export { LoadingIndicator };
