import React from 'react';
import Spinner from '@atoms/Spinner/Spinner';
import { SpinnerProps } from '@atoms/Spinner/Spinner';
import "./Loading.scss"

interface LoadingProps extends SpinnerProps{
  open: boolean;
  background?: string;
}

const Loading = ({ className, open, background = "#00000091", variant = "light", ...props }: LoadingProps) => {
  return open && (
    <div style={{ background }} className={`loading-root ${className}`}>
      <Spinner role={"status"} {...props}>
        <span className={"visually-hidden"}>Loading...</span>
      </Spinner>
    </div>
  );
};

export default Loading;
export { Loading, LoadingProps };