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

const templeRunAnimation = keyframes`
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
`;

const TempleRunWrapper = styled('div')`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('path/to/temple-run-path.jpg') repeat;
  background-size: cover;
  animation: ${templeRunAnimation} 10s linear infinite;
`;

const TempleRunBackground = ({ children }) => {
  return <TempleRunWrapper>{children}</TempleRunWrapper>;
};

export default TempleRunBackground;