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

const ripple = keyframes`
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
`;

const RippleContainer = styled('div')`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
  overflow: hidden;
`;

const Ripple = styled('div')`
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ${ripple} 1.5s infinite;
`;

const RippleBackground = ({ children }) => {
  return (
    <RippleContainer>
      <Ripple />
      <Ripple style={{ animationDelay: '0.5s' }} />
      <Ripple style={{ animationDelay: '1s' }} />
      {children}
    </RippleContainer>
  );
};

export default RippleBackground;