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

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

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

  return (
    <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>
  );
};

export default LoadingSpinner;