import { useRef, useState } from "react";

export default function MagneticButton() {
  const ref = useRef(null);
  const [offset, setOffset] = useState({ x: 0, y: 0 });
  const [hovering, setHovering] = useState(false);

  const handleMove = (e) => {
    const rect = ref.current.getBoundingClientRect();
    const cx = rect.left + rect.width / 2;
    const cy = rect.top + rect.height / 2;
    setOffset({
      x: (e.clientX - cx) * 0.35,
      y: (e.clientY - cy) * 0.35,
    });
    setHovering(true);
  };

  const handleLeave = () => {
    setOffset({ x: 0, y: 0 });
    setHovering(false);
  };

  return (
    <button
      ref={ref}
      onMouseMove={handleMove}
      onMouseLeave={handleLeave}
      style={{
        padding: "18px 48px",
        borderRadius: 60, border: "none",
        background: hovering ? "#3b7dd8" : "rgba(59,125,216,0.12)",
        color: "#fff", fontSize: 15, fontWeight: 600,
        cursor: "pointer",
        transform: `translate(${offset.x}px, ${offset.y}px)`,
        transition: "transform 0.3s cubic-bezier(.33,1,.68,1), background 0.3s",
      }}
    >
      Кнопка
    </button>
  );
}
Magnetic Button
