Magnetic Button

"use client";

import { useRef } from "react";
import gsap from "gsap";

export default function MagneticButton({ children }: { children: React.ReactNode }) {
  const ref = useRef<color: #79c0ff;">style="color: #ff7b72;">HTMLButtonElement>(null);

  const handleMouseMove = (e: React.MouseEvent) => {
    const btn = ref.current;
    if (!btn) return;
    const rect = btn.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    gsap.to(btn, { x: x * 0.3, y: y * 0.3, duration: 0.3, ease: "power2.out" });
  };

  const handleMouseLeave = () => {
    gsap.to(ref.current, { x: 0, y: 0, duration: 0.5, ease: "elastic.out(1, 0.3)" });
  };

  return (
    <color: #79c0ff;">style="color: #ff7b72;">button
      color: #79c0ff;">ref={ref}
      color: #79c0ff;">onMouseMove={handleMouseMove}
      color: #79c0ff;">onMouseLeave={handleMouseLeave}
      color: #79c0ff;">className="px-8 py-4 bg-foreground text-background rounded-full font-medium text-lg transition-colors"
    >
      {children}
    </color: #79c0ff;">style="color: #ff7b72;">button>
  );
}