import React from "react";
import { OPACITY_ON_LOAD } from "../Layout/animations";
import { Box, useColorMode ,useBreakpointValue, Spinner} from "@chakra-ui/react";
import Lottie from "lottie-react";
import rubixAnimation from "../assets/images/rubixLoader.json"; // Replace with your JSON animation path

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

  return (
    <Box
      zIndex={1000}
      // bg={"#fff"}
      h={"100vh"}
      display={"flex"}
      justifyContent={"center"}
      alignItems={"center"}
      {...OPACITY_ON_LOAD}
    >
      {/* <Lottie
        animationData={rubixAnimation}
        loop={true} // Add any additional Lottie configurations here
        // style={{ width: colorMode === "light" ? "25%" : "25%" }}
        style={{ width }}
      /> */}

      <Spinner/>
    </Box>
  );
};

export default SplashScreen;
