import { Box, Spinner, Text, useColorMode ,useBreakpointValue} from "@chakra-ui/react";
import React from "react";
import bannerImage from "../../assets/images/bannerImg.png";
import Lottie from "lottie-react";
import rubixAnimation from "../../assets/images/rubixLoader.json";

const FullScreenLoaader = ({half}) => {
  const { colorMode } = useColorMode();
  const width = useBreakpointValue({ base: "65%", md: "25%" });

  return (
    <Box
      backgroundImage={colorMode  !== "light" ? !half&& `url(${bannerImage})` : "none"}
      // position={"relative"}
      // backgroundSize="contain"
      // backgroundRepeat="no-repeat"
      h={half ? "50vh":"100vh"}
      // w={"100%"}
      display={"flex"}
      justifyContent={"center"}
      alignItems={"center"}
    >
      {/* <Spinner
        thickness="2px"
        speed="0.65s"
        emptyColor={colorMode === "light" ? "#fff" : "#000"}
        color="purple.700"
        size="lg"
      /> */}
       {/* <Lottie
        animationData={rubixAnimation}
        loop={true} // Add any additional Lottie configurations here
        // style={{ width: colorMode === "light" ? "25%" : "25%" }}
        style={{ width }}
      /> */}
      <Spinner/>
    </Box>
  );
};

export default FullScreenLoaader;
