"use client";

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

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

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

    import("vanta/dist/vanta.cells.min").then((VANTA: any) => {
      if (!vantaEffect && vantaRef.current) {
        const vantaEffect = VANTA.default({
          el: vantaRef.current,
          THREE,
          mouseControls: true,
          touchControls: true,
          gyroControls: false,
          minHeight: 200.00,
          minWidth: 200.00,
          scale: 1.00,
          scaleMobile: 1.00,
          color1: 0x0,
          color: 0x899a
        });

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

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

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