"use client";
import SvgError from "@/core/components/svgs/SvgError";
import SvgLoading from "@/core/components/svgs/SvgLoading";
import { Backdrop, Box, Stack, styled, useTheme } from "@mui/material";

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

const LoadingHardPage = ({
  children,
  loading,
  authState = false,
  sx = {},
  icon = null,
  width = 200,
  height = 200,
  label = "",
}) => {
  const theme = useTheme();
  return (
    <>
      <Backdrop
        sx={{
          bgcolor: "#fff",
          zIndex: (theme) => theme.zIndex.drawer + 1,
          ...sx,
        }}
        open={loading}
      >
        <Stack alignItems={"center"} spacing={2}>
          {authState ? (
            <Box>
              {icon ? (
                <Box
                  sx={{ color: "primary.main", width: width, height: height }}
                >
                  {icon}
                </Box>
              ) : (
                <SvgError
                  color={theme.palette.error.main}
                  width={width}
                  height={height}
                />
              )}
            </Box>
          ) : (
            <LoadingImage>
              {icon ? (
                <Box
                  sx={{ color: "primary.main", width: width, height: height }}
                >
                  {icon}
                </Box>
              ) : (
                <SvgLoading width={width} height={height} />
              )}
            </LoadingImage>
          )}
          <Stack sx={{ color: authState ? "error.main" : "primary.main" }}>
            {label}
          </Stack>
        </Stack>
      </Backdrop>
      {children}
    </>
  );
};

export default LoadingHardPage;
