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

const lavaMotion = keyframes`
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(20px) rotate(5deg); }
  100% { transform: translateY(0) rotate(0deg); }
`;

const bubbleMotion = keyframes`
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
`;

const rotate1 = keyframes`
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
`;

const yAxis = keyframes`
  from { top: -60px; border-radius: 17% 53% 45% 55% / 67% 59% 41% 33%; }
  to { top: 210px; border-radius: 97% 33% 65% 55% / 87% 29% 41% 33%; }
`;

const bs = keyframes`
  from { box-shadow: 0px 0px 0px 2px rgb(237, 255, 87); }
  50% { box-shadow: 0px 0px 0px 10px #00c4ff; }
  to { box-shadow: 0px 0px 0px 1px rgb(237, 255, 87); }
`;

const generateRandomPosition = keyframes`
  0% {
    top: ${() => Math.random() * 100}%;
    left: ${() => Math.random() * 100}%;
  }
  100% {
    top: ${() => Math.random() * 100}%;
    left: ${() => Math.random() * 100}%;
  }
`;

const Background = styled('div')`
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: transparent;
  overflow: hidden;
`;

const LavaLampContainer = styled('div')`
  display: flex;
  align-items: center;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
`;

const Bubble = styled('div')`
  position: absolute;
  border-radius: 47% 53% 45% 55% / 67% 59% 41% 33%;
  background-image: linear-gradient(45deg, rgba(255, 0, 0, 0.64), rgba(0, 255, 0, 0.84), #FF00FF, #FFA500);
  z-index: 0;
  filter: blur(10px);
  animation: ${rotate1} 9s linear infinite, ${yAxis} 10s linear infinite alternate-reverse forwards, ${bs} 5s linear infinite, ${generateRandomPosition} 12s linear infinite;
`;

const LavaLampBackground = ({ children }) => {
  return (
    <Background>
      <LavaLampContainer>
        {Array.from({ length: 5 }).map((_, index) => (
          <Bubble
            key={index}
            style={{
              top: `${Math.random() * 100}%`,
              left: `${Math.random() * 100}%`,
              width: `${40 + index * 10}px`,
              height: `${50 + index * 10}px`,
              animationDuration: `${12 + index * 2}s`,
            }}
          />
        ))}
      </LavaLampContainer>
      {children}
    </Background>
  );
};

export default LavaLampBackground;