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

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

const SnowfallBackground = ({ children }) => {
  useEffect(() => {
    const canvas = document.getElementById('snowfallCanvas');
    const ctx = canvas.getContext('2d');
    const snowflakes = [];

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    function Snowflake(x, y) {
      this.x = x;
      this.y = y;
      this.size = Math.random() * 5 + 2;
      this.speed = Math.random() * 3 + 1;
      this.opacity = Math.random() * 0.5 + 0.5;
      this.angle = Math.random() * Math.PI * 2;
    }

    Snowflake.prototype.update = function() {
      this.y += this.speed;
      this.x += Math.sin(this.angle) * 2;
      if (this.y > canvas.height) {
        this.y = 0;
        this.x = Math.random() * canvas.width;
      }
    };

    Snowflake.prototype.draw = function() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
      ctx.fill();
    };

    function loop() {
      requestAnimationFrame(loop);

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      let i = snowflakes.length;
      while (i--) {
        snowflakes[i].update();
        snowflakes[i].draw();
      }
    }

    function createSnowflakes() {
      let snowflakeCount = 100;
      while (snowflakeCount--) {
        snowflakes.push(new Snowflake(Math.random() * canvas.width, Math.random() * canvas.height));
      }
    }

    createSnowflakes();
    loop();
  }, []);

  return (
    <SnowfallWrapper>
      <canvas id="snowfallCanvas"></canvas>
      {children}
    </SnowfallWrapper>
  );
};

export default SnowfallBackground;