import type { ReactNode } from "react";
import { loading } from "@simplybusiness/icons";
import { Icon } from "../Icon";
import { VisuallyHidden } from "../VisuallyHidden";

type LoadingProps = {
  children: ReactNode;
};

const Loading = (props: LoadingProps) => {
  const { children } = props;

  return (
    <>
      <div className="mobius-button__icon-wrapper">
        <Icon icon={loading} spin size="md" />
      </div>
      <VisuallyHidden className="mobius-button__loading-text">
        Loading
      </VisuallyHidden>
      {children}
    </>
  );
};

export { Loading };
