Popravi mi i poboljsaj ovaj moj kod, i posalji mi ceo kod na kraju i obrazlozenje sta si poboljsao i zasto
""use client";

import React, { useEffect, useRef, useState, useMemo } from "react";
import { useTheme } from "next-themes";

interface Snowflake {
  x: number;
  y: number;
  size: number;
  speed: number;
  wind: number;
  opacity: number;
  shape: number;
}

interface SnowProps {
  maxSnowflakes?: number;
  minSize?: number;
  maxSize?: number;
  minSpeed?: number;
  maxSpeed?: number;
  minWind?: number;
  maxWind?: number;
  minOpacity?: number;
  maxOpacity?: number;
  color?: string;
  zIndex?: number;
  showInLightMode?: boolean;
}

const Snow: React.FC<SnowProps> = ({
  maxSnowflakes = 150,
  minSize = 1,
  maxSize = 4,
  minSpeed = 0.1,
  maxSpeed = 0.5,
  minWind = -0.1,
  maxWind = 0.1,
  minOpacity = 0.3,
  maxOpacity = 0.8,
  color = "#ffffff",
  zIndex = 9999,
  showInLightMode = false,
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const { theme, systemTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const snowflakeShapes = useMemo(() => {
    const shapes = [];
    for (let i = 0; i < 5; i++) {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      if (!ctx) continue;

      canvas.width = 20;
      canvas.height = 20;
      ctx.strokeStyle = color;
      ctx.lineWidth = 1;
      ctx.beginPath();
      for (let j = 0; j < 6; j++) {
        ctx.moveTo(10, 10);
        ctx.lineTo(10, 0);
        ctx.moveTo(10, 3);
        ctx.lineTo(7, 6);
        ctx.moveTo(10, 3);
        ctx.lineTo(13, 6);
        ctx.rotate((Math.PI * 2) / 6);
      }
      ctx.stroke();
      shapes.push(canvas);
    }
    return shapes;
  }, [color]);

  useEffect(() => {
    if (!mounted) return;

    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let animationFrameId: number;
    const snowflakes: Snowflake[] = [];

    const resizeCanvas = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    };

    const createSnowflake = (): Snowflake => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height - canvas.height,
      size: Math.random() * (maxSize - minSize) + minSize,
      speed: Math.random() * (maxSpeed - minSpeed) + minSpeed,
      wind: Math.random() * (maxWind - minWind) + minWind,
      opacity: Math.random() * (maxOpacity - minOpacity) + minOpacity,
      shape: Math.floor(Math.random() * snowflakeShapes.length),
    });

    const drawSnowflake = (flake: Snowflake) => {
      ctx.globalAlpha = flake.opacity;
      ctx.drawImage(
        snowflakeShapes[flake.shape],
        flake.x - flake.size,
        flake.y - flake.size,
        flake.size * 2,
        flake.size * 2
      );
    };

    const updateSnowflake = (flake: Snowflake) => {
      flake.y += flake.speed;
      flake.x += Math.sin(flake.y * 0.01) * flake.wind;

      if (flake.y > canvas.height) {
        Object.assign(flake, createSnowflake());
        flake.y = -flake.size;
      }

      if (flake.x > canvas.width) flake.x = 0;
      if (flake.x < 0) flake.x = canvas.width;
    };

    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      if (snowflakes.length < maxSnowflakes) {
        snowflakes.push(createSnowflake());
      }

      snowflakes.forEach((flake) => {
        drawSnowflake(flake);
        updateSnowflake(flake);
      });

      animationFrameId = requestAnimationFrame(animate);
    };

    const startSnowAnimation = () => {
      resizeCanvas();
      window.addEventListener("resize", resizeCanvas);
      animate();
    };

    const stopSnowAnimation = () => {
      cancelAnimationFrame(animationFrameId);
      window.removeEventListener("resize", resizeCanvas);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    };

    const currentTheme = theme === "system" ? systemTheme : theme;

    if (currentTheme === "dark" || (showInLightMode && currentTheme === "light")) {
      startSnowAnimation();
    } else {
      stopSnowAnimation();
    }

    return () => {
      stopSnowAnimation();
    };
  }, [theme, systemTheme, mounted, maxSnowflakes, minSize, maxSize, minSpeed, maxSpeed, minWind, maxWind, minOpacity, maxOpacity, color, showInLightMode, snowflakeShapes]);

  if (!mounted) return null;

  const currentTheme = theme === "system" ? systemTheme : theme;
  if (currentTheme !== "dark" && !(showInLightMode && currentTheme === "light")) return null;

  return (
    <canvas
      ref={canvasRef}
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        pointerEvents: "none",
        zIndex,
      }}
    />
  );
};

export default React.memo(Snow);"