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

const scaleUp = keyframes`
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0);
  }
  10% {
    opacity: 1;
  }
  95% {
    transform: translate3d(0, 0, 55vmin) rotate(360deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 1vmin);
  }
`;

const Dot = styled('div')`
  @grid: 50x1 / 50vmin;
  perspective: 23vmin;
  width: 80%;
  height: 80%;
  background: radial-gradient(
    ${(props) => props.color} 15%, transparent 50%
  ) ${(props) => props.x} ${(props) => props.y} / ${(props) => props.size} no-repeat;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: ${scaleUp} 20s linear infinite;
  animation-delay: ${(props) => props.delay}s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
`;

const DotsWrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
`;

const random = (min, max) => Math.random() * (max - min) + min;

const DotsBackground = ({ children }) => {
  const dots = Array.from({ length: 50 }).map((_, i) => ({
    color: ['#00b8a9', '#f8f3d4', '#f6416c', '#ffde7d'][Math.floor(Math.random() * 4)],
    x: `${random(0, 100)}%`,
    y: `${random(0, 100)}%`,
    size: `${random(1, 3)}%`,
    delay: i * -0.4,
  }));

  return (
    <DotsWrapper>
      {dots.map((dot, i) => (
        <Dot
          key={i}
          color={dot.color}
          x={dot.x}
          y={dot.y}
          size={dot.size}
          delay={dot.delay}
        />
      ))}
      {children}
    </DotsWrapper>
  );
};

export default DotsBackground;