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

const fireflyBlink = keyframes`
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
`;

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

const Firefly = styled('div')`
  position: absolute;
  width: 4px;
  height: 4px;
  background: yellow;
  border-radius: 50%;
  animation: ${fireflyBlink} 1s infinite ease-in-out;
`;

const FirefliesBackground = ({ children }) => {
  useEffect(() => {
    const firefliesWrapper = document.getElementById('firefliesWrapper');
    for (let i = 0; i < 50; i++) {
      const firefly = document.createElement('div');
      firefly.className = Firefly.styledComponentId;
      firefly.style.top = `${Math.random() * 100}%`;
      firefly.style.left = `${Math.random() * 100}%`;
      firefly.style.animationDuration = `${Math.random() * 2 + 1}s`;
      firefliesWrapper.appendChild(firefly);
    }
  }, []);

  return <FirefliesWrapper id="firefliesWrapper">{children}</FirefliesWrapper>;
};

export default FirefliesBackground;