import { styled, keyframes } from '@mui/system';
import  {useTheme}  from "../../Theme/ThemeContext"; // Import the theme context
import React from 'react';
const bgScrollingReverse = keyframes`
  100% { background-position: 50px 50px; }
`;

const InfinityBackground = styled('div')`
  @import url('https://fonts.googleapis.com/css?family=Exo:100');
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  height: 100%;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC') repeat 0 0;
  animation: ${bgScrollingReverse} 0.92s infinite linear;
  background-color: transparent;
  position: relative; /* Ensure the overlay is positioned correctly */
  color: #999;
  font: 400 16px/1.5 'Exo', Ubuntu, 'Segoe UI', Helvetica, Arial, sans-serif;
  text-align: center;
  overflow: auto;  /* Allow scrolling within the background */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

  &::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, and Opera */
  }
`;

const DarkOverlay = styled('div')`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Dark transparent overlay */
  pointer-events: none; /* Allow interactions to pass through */
`;

const InfinityBackgroundComponent = ({ children }) => {
  const { theme } = useTheme(); // Get the current theme

  return (
    <InfinityBackground>
      {theme === 'dark' && <DarkOverlay />}
      {children}
    </InfinityBackground>
  );
};

export default InfinityBackgroundComponent;