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

const shootingStarAnimation = keyframes`
  0% { opacity: 0; transform: translateY(-200px) translateX(-200px) scale(0.5); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateY(200px) translateX(200px) scale(0.5); }
`;

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

const Star = styled('div')`
  position: absolute;
  width: 2px;
  height: 200px;
  background: linear-gradient(to bottom, white, transparent);
  animation: ${shootingStarAnimation} 3s linear infinite;
`;

const ShootingStarsBackground = ({ children }) => {
  useEffect(() => {
    const shootingStarsWrapper = document.getElementById('shootingStarsWrapper');
    for (let i = 0; i < 20; 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() * 1 + 2}s`;
      shootingStarsWrapper.appendChild(star);
    }
  }, []);

  return <ShootingStarsWrapper id="shootingStarsWrapper">{children}</ShootingStarsWrapper>;
};

export default ShootingStarsBackground;