import { useState } from "react";
import RingLoader from "react-spinners/RingLoader";
import MoonLoader from "react-spinners/MoonLoader";
import "../styles/spinner.scss";

const LoadingSpinner = (props) => {
  const { message, loaderType } = props;
  let [loading, setLoading] = useState(true);
  const color = "#31e0f7";

  const override = {
    display: "flex",
    flexDirection: "column",
    margin: "12px auto",
    borderColor: "#a4ebf4",
  };

  const isMoon = loaderType === "MoonLoader" ? true : false;
  return (
    <div>
      {isMoon ? (
        <div>
          <div className="spinner-outer-wrapper moon">
            <MoonLoader
              color={color}
              loading={loading}
              cssOverride={override}
              size={150}
              aria-label="Loading Spinner"
              data-testid="loader"
            />
          </div>
        </div>
      ) : (
        <div className="spinner-outer-wrapper">
          <div className="spinner-container">
            <div className="loading-text-box">
              <p className="loading-graph">{message}</p>
            </div>
            <RingLoader
              color={color}
              loading={loading}
              cssOverride={override}
              size={150}
              aria-label="Loading Spinner"
              data-testid="loader"
            />
          </div>
        </div>
      )}
    </div>
  );
};

export default LoadingSpinner;
