import React, { useEffect } from "react";
import { Box } from "@mui/material";
import Spinner from "react-bootstrap/Spinner";

const LoadingContainer = ({ loadingText }) => {
  const LoadingContainerStyle = {
    backgroundColor: "rgba(0,0,0,0.5)",
    overflow: "hidden",
    position: "fixed",
    top: 0,
    left: 0,
    width: "100vw",
    height: "100vh",
    zIndex: 1000, // Ensure it appears above other content
  };

  useEffect(() => {
    const body = document.querySelector("body");
    body.scrollTop = 0;
    body.style.overflow = "hidden";
    return () => {
      body.style.overflow = "auto";
    };
  }, []);

  return (
    <>
      <Box
        className="d-flex justify-content-center align-items-center"
        style={LoadingContainerStyle}
      >
        <Spinner animation="border" variant="light" role="status">
          <span className="visually-hidden">Loading...</span>
        </Spinner>
      </Box>
    </>
  );
};

export default LoadingContainer;