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

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

const GradientWavesWrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: ${gradientWave} 15s ease infinite;
`;

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

export default GradientWavesBackground;