import { Box, CircularProgress, Typography, useTheme } from "@mui/material";

interface Props {
  message?: string;
}

export default function LoadingScreen(props: Props) {
	const { message } = props;
	const theme = useTheme();

	return (
		<Box 
			sx={{
				position: "absolute",
				top: 0,
				left: 0,
				width: "100%",
				height: "100%",
				display: "flex",
				flexDirection: "column",
				justifyContent: "center",
				alignItems: "center",
				textAlign: "center",
			}}
		>
			<CircularProgress
				size={150}
				style={{ marginBottom: theme.spacing(4) }}
			/>
			<br/>
			<Typography variant="h6">
				{message ? message : "Loading..."}
			</Typography>
		</Box>
	);
}