"use client";

import { useEffect, useRef, useState } from "react";
import * as THREE from "three";

export default function VantaBackground() {
  const vantaRef = useRef<HTMLDivElement>(null);
  const [vantaEffect, setVantaEffect] = useState<{
    destroy: () => void;
  } | null>(null);

  useEffect(() => {
    let effect: { destroy: () => void } | undefined;

    import("vanta/dist/vanta.net.min").then((VANTA: any) => {
      if (!vantaEffect && vantaRef.current) {
        const vantaEffect = VANTA.default({
          el: vantaRef.current,
          THREE,
          mouseControls: true,
          touchControls: true,
          gyroControls: false,
          color: 0xff0000,
          backgroundColor: 0xf9f9f9,
          points: 12.0,
          maxDistance: 0.0,
          spacing: 16.0,
          scaleMobile: 1.00,
        });

        effect = vantaEffect;
        setVantaEffect(vantaEffect);
      }
    });

    return () => {
      if (effect) effect.destroy();
    };
  }, []);

  return (
    <div
      ref={vantaRef}
      style={{
        width: "100%",
        height: "100%",
        position: "absolute",
        top: 0,
        left: 0,
        zIndex: 0,
        pointerEvents: "none",
      }}
    />
  );
}