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

const createHalo = keyframes`
  0% {
    opacity: 0.8;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
`;

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

const Halo = styled('div')`
  position: absolute;
  border-radius: 50%;
  background: ${(props) => props.color};
  width: ${(props) => props.size}px;
  height: ${(props) => props.size}px;
  top: ${(props) => props.y}px;
  left: ${(props) => props.x}px;
  opacity: 0.8;
  animation: ${createHalo} 2s linear infinite;
`;

const HaloBackground = ({ children }) => {
  const haloWrapperRef = useRef(null);

  const createHalos = (e) => {
    const colors = ['rgba(0, 128, 255, 0.5)', 'rgba(255, 255, 255, 0.5)', 'rgba(255, 105, 180, 0.5)'];
    const size = Math.random() * 50 + 50; // Random size between 50 and 100
    const color = colors[Math.floor(Math.random() * colors.length)];

    const halo = document.createElement('div');
    halo.style.position = 'absolute';
    halo.style.borderRadius = '50%';
    halo.style.background = color;
    halo.style.width = `${size}px`;
    halo.style.height = `${size}px`;
    halo.style.top = `${e.clientY - size / 2}px`;
    halo.style.left = `${e.clientX - size / 2}px`;
    halo.style.opacity = '0.8';
    halo.style.animation = `${createHalo} 2s linear infinite`;

    haloWrapperRef.current.appendChild(halo);

    setTimeout(() => {
      halo.remove();
    }, 2000);
  };

  useEffect(() => {
    const wrapper = haloWrapperRef.current;
    wrapper.addEventListener('mousemove', createHalos);
    return () => wrapper.removeEventListener('mousemove', createHalos);
  }, []);

  return (
    <HaloWrapper ref={haloWrapperRef}>
      {children}
    </HaloWrapper>
  );
};

export default HaloBackground;