import React from 'react';
import { styled } from '@mui/system';

const DynamicPatternWrapper = styled('div')`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: ${({ patternUrl }) => `url(${patternUrl})`};
  background-size: ${({ patternSize }) => patternSize};
  background-repeat: repeat;
`;

const DynamicPatternBackground = ({ children, patternUrl, patternSize = '50px' }) => {
  return (
    <DynamicPatternWrapper patternUrl={patternUrl} patternSize={patternSize}>
      {children}
    </DynamicPatternWrapper>
  );
};

export default DynamicPatternBackground;



// import React from 'react';
// import ReactDOM from 'react-dom';
// import SimpleDateComponent from './SimpleDateComponent';
// import DynamicPatternBackground from './DynamicPatternBackground';
// import myPattern from './myPattern.svg'; // Replace with your SVG path

// const App = () => {
//   return (
//     <DynamicPatternBackground patternUrl={myPattern} patternSize="100px">
//       <SimpleDateComponent />
//     </DynamicPatternBackground>
//   );
// };

// ReactDOM.render(<App />, document.getElementById('root'));