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

const screen = keyframes`
  from {
    opacity: 0;
  }
  25% {
    opacity: 0.3;
    transform: scale3d(3, 3, 4);
  }
  50% {
    opacity: 0.75;
  }
  75% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
`;

const Bubble = styled('i')`
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  animation: ${screen} infinite;
`;

const bubblesStyles = [
  { top: '20px', left: '30px', background: 'radial-gradient(circle, rgba(2,226,252,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #02e2fc', animationDuration: '5s' },
  { top: '420px', left: '30px', background: 'radial-gradient(circle, rgba(250,160,2,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #faa002', animationDuration: '21s' },
  { top: '550px', left: '880px', background: 'radial-gradient(circle, rgba(20,252,2,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #14fc02', animationDuration: '5s' },
  { top: '5px', left: '1030px', background: 'radial-gradient(circle, rgba(252,2,196,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #fc02c4', animationDuration: '4s' },
  { top: '280px', left: '12px', background: 'radial-gradient(circle, rgba(139,44,148,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #8b2c94', animationDuration: '5s' },
  { top: '550px', left: '30px', background: 'radial-gradient(circle, rgba(251,184,41,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #FBB829', animationDuration: '6s' },
  { top: '650px', left: '50px', background: 'radial-gradient(circle, rgba(195,255,104,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #C3FF68', animationDuration: '15s' },
  { top: '20px', left: '860px', background: 'radial-gradient(circle, rgba(255,0,102,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #FF0066', animationDuration: '5s' },
  { top: '896px', left: '132px', background: 'radial-gradient(circle, rgba(255,255,0,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #FFFF00', animationDuration: '13s' },
  { top: '578px', left: '357px', background: 'radial-gradient(circle, rgba(127,175,27,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #7FAF1B', animationDuration: '4s' },
  { top: '380px', left: '230px', background: 'radial-gradient(circle, rgba(1,210,255,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #01D2FF', animationDuration: '5s' },
  { top: '570px', left: '1100px', background: 'radial-gradient(circle, rgba(237,247,255,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #EDF7FF', animationDuration: '6s' },
  { top: '600px', left: '600px', background: 'radial-gradient(circle, rgba(0,255,255,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #00FFFF', animationDuration: '7s' },
  { top: '200px', left: '520px', background: 'radial-gradient(circle, rgba(0,0,255,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #0000FF', animationDuration: '14s' },
  { top: '370px', left: '500px', background: 'radial-gradient(circle, rgba(16,225,228,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #10e1e4', animationDuration: '9s' },
  { top: '620px', left: '730px', background: 'radial-gradient(circle, rgba(255,51,0,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #FF3300', animationDuration: '3s' },
  { top: '62px', left: '330px', background: 'radial-gradient(circle, rgba(255,234,232,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #FFEAE8', animationDuration: '4s' },
  { top: '0px', left: '250px', background: 'radial-gradient(circle, rgba(255,229,0,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #FFE500', animationDuration: '5s' },
  { top: '600px', left: '180px', background: 'radial-gradient(circle, rgba(255,102,153,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #FF6699', animationDuration: '6s' },
  { top: '987px', left: '13px', background: 'radial-gradient(circle, rgba(84,156,204,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #549CCC', animationDuration: '7s' },
  { top: '120px', left: '930px', background: 'radial-gradient(circle, rgba(184,175,3,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #B8AF03', animationDuration: '8s' },
  { top: '80px', left: '700px', background: 'radial-gradient(circle, rgba(171,250,249,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #ABFAF9', animationDuration: '5s' },
  { top: '350px', left: '720px', background: 'radial-gradient(circle, rgba(127,15,255,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #7F0FFF', animationDuration: '2s' },
  { top: '997px', left: '678px', background: 'radial-gradient(circle, rgba(48,128,0,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #308000', animationDuration: '3s' },
  { top: '714px', left: '246px', background: 'radial-gradient(circle, rgba(255,38,38,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #FF2626', animationDuration: '4s' },
  { top: '0px', left: '480px', background: 'radial-gradient(circle, rgba(15,29,215,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #0F1DD7', animationDuration: '5s' },
  { top: '456px', left: '1000px', background: 'radial-gradient(circle, rgba(51,102,153,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #336699', animationDuration: '6s' },
  { top: '350px', left: '865px', background: 'radial-gradient(circle, rgba(70,172,255,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #46ACFF', animationDuration: '7s' },
  { top: '100px', left: '100px', background: 'radial-gradient(circle, rgba(222,4,5,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #DE0405', animationDuration: '8s' },
  { top: '1087px', left: '722px', background: 'radial-gradient(circle, rgba(77,254,21,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #4DFE15', animationDuration: '9s' },
  { width: '200px', height: '200px', top: '795px', left: '605px', background: 'radial-gradient(circle, rgba(243,10,70,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #F30A46', animationDuration: '1s' },
  { top: '234px', left: '678px', background: 'radial-gradient(circle, rgba(245,253,45,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #F5FD2D', animationDuration: '2s' },
  { top: '270px', left: '1230px', background: 'radial-gradient(circle, rgba(178,0,255,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #B200FF', animationDuration: '3s' },
  { width: '200px', height: '200px', top: '1126px', left: '332px', background: 'radial-gradient(circle, rgba(102,204,255,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #66CCFF', animationDuration: '4s' },
  { top: '407px', left: '83px', background: 'radial-gradient(circle, rgba(20,243,175,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #14F3AF', animationDuration: '5s' },
  { width: '200px', height: '200px', top: '176px', left: '297px', background: 'radial-gradient(circle, rgba(100,245,102,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #64F566', animationDuration: '6s' },
  { width: '300px', height: '300px', top: '820px', right: '10px', background: 'radial-gradient(circle, rgba(236,218,65,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #ECDA41', animationDuration: '7s' },
  { top: '500px', left: '500px', background: 'radial-gradient(circle, rgba(255,61,45,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #FF3D2D', animationDuration: '8s' },
  { top: '20px', right: '26px', background: 'radial-gradient(circle, rgba(74,73,235,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #4A49EB', animationDuration: '9s' },
  { width: '200px', height: '200px', top: '251px', left: '1053px', background: 'radial-gradient(circle, rgba(255,72,0,0.65) 0%, rgba(0,0,0,0) 100%)', boxShadow: '0px 0px 5px 0px #FF4800', animationDuration: '10s' },
];

const Wrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
`;

const BubblesBackground = ({ children }) => {
  return (
    <Wrapper>
      {bubblesStyles.map((style, index) => (
        <Bubble key={index} style={style} />
      ))}
      {children}
    </Wrapper>
  );
};

export default BubblesBackground;