"use client";

import { useRef } from "react";

export function MagneticHoverButton() {
  const wrapRef = useRef<HTMLDivElement>(null);
  const innerRef = useRef<HTMLSpanElement>(null);

  function handleMove(e: React.MouseEvent<HTMLDivElement>) {
    const wrap = wrapRef.current;
    const inner = innerRef.current;
    if (!wrap || !inner) return;
    const rect = wrap.getBoundingClientRect();
    const cx = rect.left + rect.width / 2;
    const cy = rect.top + rect.height / 2;
    const dx = (e.clientX - cx) * 0.35;
    const dy = (e.clientY - cy) * 0.35;
    wrap.style.transform = `translate(${dx}px, ${dy}px)`;
    inner.style.transform = `translate(${dx * 0.4}px, ${dy * 0.4}px)`;
  }

  function handleLeave() {
    const wrap = wrapRef.current;
    const inner = innerRef.current;
    if (wrap) wrap.style.transform = "translate(0,0)";
    if (inner) inner.style.transform = "translate(0,0)";
  }

  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center">
      <div
        ref={wrapRef}
        onMouseMove={handleMove}
        onMouseLeave={handleLeave}
        className="inline-block"
        style={{ transition: "transform .35s cubic-bezier(.2,.7,.2,1)" }}
      >
        <button
          type="button"
          className="px-7 py-3.5 rounded-full text-[14px] font-medium text-[#FAFAF8] active:scale-[0.97]"
          style={{
            background: "#111",
            transition: "transform .2s ease",
          }}
        >
          <span
            ref={innerRef}
            className="inline-block"
            style={{ transition: "transform .35s cubic-bezier(.2,.7,.2,1)" }}
          >
            Pull me closer
          </span>
        </button>
      </div>
    </div>
  );
}
Magnetic Hover Button
