Magnetic Button

'use client';

import { useRef } from 'react';
import type { ElementType, HTMLAttributes, MouseEvent, ReactNode } from 'react';
import './MagneticButton.css';

/**
 * MagneticButton — A button that physically follows the user's cursor when hovered,
 * providing a satisfying magnetic snap effect.
 *
 * @param strength - Optional. How intense the magnetic pull is (0–1). Default 0.5.
 */
export interface MagneticButtonProps extends HTMLAttributes<HTMLElement> {
  href?: string;
  target?: string;
  rel?: string;
  type?: 'button' | 'submit' | 'reset';
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  strength?: number;
  disabled?: boolean;
  children?: ReactNode;
}

export function MagneticButton({
  href,
  type = 'button',
  variant = 'secondary',
  size = 'md',
  strength = 0.5,
  disabled = false,
  className,
  children,
  onMouseMove,
  onMouseLeave,
  ...rest
}: MagneticButtonProps) {
  const Tag: ElementType = href ? 'a' : 'button';
  const innerRef = useRef<HTMLSpanElement>(null);

  // Transforms are written straight to the DOM — no re-render per mouse move.
  const move = (el: HTMLElement, x: number, y: number) => {
    el.style.transform = `translate(${x}px, ${y}px)`;
    if (innerRef.current) innerRef.current.style.transform = `translate(${x * 0.4}px, ${y * 0.4}px)`;
  };

  const handleMove = (e: MouseEvent<HTMLElement>) => {
    onMouseMove?.(e);
    if (disabled) return;
    const el = e.currentTarget;
    const rect = el.getBoundingClientRect();
    move(el, (e.clientX - rect.left - rect.width / 2) * strength, (e.clientY - rect.top - rect.height / 2) * strength);
  };

  const handleLeave = (e: MouseEvent<HTMLElement>) => {
    onMouseLeave?.(e);
    move(e.currentTarget, 0, 0);
  };

  return (
    <Tag
      {...rest}
      href={href}
      type={href ? undefined : type}
      disabled={href ? undefined : disabled}
      aria-disabled={href && disabled ? true : undefined}
      className={['magnetic-btn', `magnetic-btn--${variant}`, `magnetic-btn--${size}`, className].filter(Boolean).join(' ')}
      onMouseMove={handleMove}
      onMouseLeave={handleLeave}
    >
      <span ref={innerRef} className="magnetic-btn__inner">{children}</span>
    </Tag>
  );
}

export default MagneticButton;

/* MagneticButton — ported from astro-component-kit (buttons/MagneticButton.astro) */

.magnetic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--r-full, 9999px);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
  user-select: none;
  font-family: var(--font-sans, inherit);
  font-weight: 600;
  white-space: nowrap;
}

.magnetic-btn__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

/* Variants */
.magnetic-btn--primary {
  background: var(--c-primary, #6366f1);
  color: #fff;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.magnetic-btn--secondary {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  color: var(--c-text-1, #f8fafc);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.magnetic-btn--ghost {
  background: transparent;
  color: var(--c-primary-light, #818cf8);
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.magnetic-btn:hover:not(:disabled) {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.magnetic-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* Sizes */
.magnetic-btn--sm { min-width: 80px; min-height: 40px; }
.magnetic-btn--sm .magnetic-btn__inner { padding: 0.5rem 1.2rem; font-size: 0.8rem; }

.magnetic-btn--md { min-width: 120px; min-height: 50px; }
.magnetic-btn--md .magnetic-btn__inner { padding: 0.8rem 1.8rem; font-size: 0.95rem; }

.magnetic-btn--lg { min-width: 160px; min-height: 64px; }
.magnetic-btn--lg .magnetic-btn__inner { padding: 1.1rem 2.5rem; font-size: 1.1rem; }