import { useEffect, useState } from "react";

const MenuLightRays = () => {
  const [LightRays, setLightRays] = useState<null | React.ComponentType<any>>(null);

  useEffect(() => {
    const open = async () => {
      if (LightRays) return;

      const mod = await import("@/components/LightRays");
      setLightRays(() => mod.default);
    };

    window.addEventListener("menu:open", open);
    return () => window.removeEventListener("menu:open", open);
  }, [LightRays]);

  if (!LightRays) return null;

  return (
    <LightRays
      raysOrigin="bottom-center"
      raysColor="#26a6ff"
      raysSpeed={2}
      lightSpread={1.5}
      rayLength={5}
      followMouse
      mouseInfluence={0.1}
      noiseAmount={0.3}
      saturation={6}
      distortion={0.4}
    />
  );
};

export default MenuLightRays;