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

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

const AuroraWrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(270deg, #1d2b64, #f8cdda);
  background-size: 400% 400%;
  animation: ${auroraAnimation} 20s ease infinite;
`;

const AuroraBackground = ({ children }) => {
  console.log('Rendering AuroraBackground');
  return <AuroraWrapper>{children}</AuroraWrapper>;
};

export default AuroraBackground;