import React, { useEffect } from 'react';
import { styled } from '@mui/system';
import particlesJS from 'particles.js';

const ParticleWrapper = styled('div')`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
`;

const ParticleBackground = ({ children }) => {
  useEffect(() => {
    particlesJS('particles-js', {
      particles: {
        number: { value: 100 },
        size: { value: 3 },
        move: { speed: 1 },
        line_linked: { enable: true },
      },
      interactivity: {
        events: {
          onhover: { enable: true, mode: 'repulse' },
        },
      },
    });
  }, []);

  return (
    <>
      <ParticleWrapper id="particles-js" />
      {children}
    </>
  );
};

export default ParticleBackground;