import { Backdrop, Fade, styled } from "@mui/material";
import StyledImage from "./StyledImage";

const LoadingImage = styled(StyledImage)({
  "@keyframes load": {
    "0%": {
      // opacity: 0,
      transform: "scale(1)",
    },
    "50%": {
      // opacity: 1,
      transform: "scale(2)",
    },
    "100%": {
      // opacity: 0,
      transform: "scale(1)",
    },
  },
  animation: "load 2s infinite",
});

const LoadingHardPage = ({ children, loading }) => {
  return (
    <>
      <Backdrop
        sx={{ bgcolor: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={loading}
      >
        <Fade in={true}>
          <LoadingImage
            src={"/images/loading.svg"}
            alt="loading marhaba"
            priority
            width={100}
            height={100}
          />
        </Fade>
      </Backdrop>
      {children}
    </>
  );
};

export default LoadingHardPage;