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

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

const NeonGrid = styled('div')`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,0,150,1) 0%, rgba(0,204,255,1) 100%);
  background-size: 200% 200%;
  animation: ${neonGridAnimation} 15s ease infinite;
  z-index: -1;
`;

const NeonGridBackground = ({ children }) => {
  return <NeonGrid>{children}</NeonGrid>;
};

export default NeonGridBackground;