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

const starTwinkle = keyframes`
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
`;

const SpaceWrapper = styled('div')`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: black;
  overflow: hidden;
`;

const Star = styled('div')`
  position: absolute;
  background-color: white;
  border-radius: 50%;
  width: 2px;
  height: 2px;
  animation: ${starTwinkle} 2s infinite ease-in-out;
`;

const SpaceBackground = ({ children }) => {
  useEffect(() => {
    const spaceWrapper = document.getElementById('spaceWrapper');
    for (let i = 0; i < 100; i++) {
      const star = document.createElement('div');
      star.className = Star.styledComponentId;
      star.style.top = `${Math.random() * 100}%`;
      star.style.left = `${Math.random() * 100}%`;
      star.style.animationDuration = `${Math.random() * 3 + 2}s`;
      spaceWrapper.appendChild(star);
    }
  }, []);

  return <SpaceWrapper id="spaceWrapper">{children}</SpaceWrapper>;
};

export default SpaceBackground;