Magnetic Animation

"use client";

import type React from "react";

import type { ReactNode } from "react";
import { useState, useRef } from "react";

interface MagneticAnimationProps {
  children: ReactNode;
  active?: boolean;
  className?: string;
  strength?: number;
  radius?: number;
  smooth?: number;
}

export function MagneticAnimation({
  children,
  active = true,
  className = "",
  strength = 1,
  radius = 100,
  smooth = 0.2,
}: MagneticAnimationProps) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const elementRef = useRef<HTMLDivElement>(null);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!active || !elementRef.current) return;

    const { clientX, clientY } = e;
    const { left, top, width, height } =
      elementRef.current.getBoundingClientRect();

    const centerX = left + width / 2;
    const centerY = top + height / 2;

    const distanceX = clientX - centerX;
    const distanceY = clientY - centerY;

    const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);

    // If the cursor is within the action radius
    if (distance < radius) {
      // Calculate the force based on the distance (closer = stronger)
      const power = 1 - distance / radius;

      // Apply the magnetic effect
      setPosition({
        x: distanceX * power * strength,
        y: distanceY * power * strength,
      });
    } else {
      // Gradually return to the original position
      setPosition((prev) => ({
        x: prev.x * (1 - smooth),
        y: prev.y * (1 - smooth),
      }));
    }
  };

  const handleMouseLeave = () => {
    // Return to the original position
    setPosition({ x: 0, y: 0 });
  };

  return (
    <div
      ref={elementRef}
      className={`${className}`}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
      <div
        style={{
          transform: `translate(${position.x}px, ${position.y}px)`,
          transition: "transform 0.2s cubic-bezier(0.23, 1, 0.32, 1)",
        }}
      >
        {children}
      </div>
    </div>
  );
}