"use client";

import { useState, useEffect, useRef } from "react";
import { GravityEngine } from "@/lib/gravity-engine";
import { Magnet } from "lucide-react";

export default function GravityToggle() {
  const [isActive, setIsActive] = useState(false);
  const engineRef = useRef<GravityEngine | null>(null);

  useEffect(() => {
    engineRef.current = new GravityEngine();
    return () => engineRef.current?.stop();
  }, []);

  const toggleGravity = () => {
    if (!engineRef.current) return;

    if (isActive) {
      engineRef.current.stop();
    } else {
      engineRef.current.start();
    }
    setIsActive(!isActive);
  };

  return (
    <button
      onClick={toggleGravity}
      className="fixed bottom-4 right-4 p-3 bg-yellow-400 text-black rounded-full shadow-lg z-50 hover:bg-yellow-500 transition-colors"
      title="Toggle Gravity"
    >
      <Magnet size={24} />
    </button>
  );
}