Magnet Tabs

"use client";

import { useRef, useState } from "react";
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";

interface MagnetTab {
    id: string;
    label: string;
}

interface MagnetTabsProps {
    tabs: MagnetTab[];
}

export function MagnetTabs({ tabs }: MagnetTabsProps) {
    const [activeId, setActiveId] = useState(tabs[0].id);
    const containerRef = useRef<HTMLDivElement>(null);
    const mouseX = useMotionValue(0);
    const mouseY = useMotionValue(0);

    const handleMouseMove = (e: React.MouseEvent) => {
        const rect = containerRef.current?.getBoundingClientRect();
        if (!rect) return;
        mouseX.set(e.clientX - rect.left - rect.width / 2);
        mouseY.set(e.clientY - rect.top - rect.height / 2);
    };

    const handleMouseLeave = () => {
        mouseX.set(0);
        mouseY.set(0);
    };

    const x = useSpring(useTransform(mouseX, [-200, 200], [-6, 6]), { stiffness: 120, damping: 18 });
    const y = useSpring(useTransform(mouseY, [-50, 50], [-3, 3]), { stiffness: 120, damping: 18 });

    return (
        <motion.div
            ref={containerRef}
            onMouseMove={handleMouseMove}
            onMouseLeave={handleMouseLeave}
            style={{ x, y }}
            className="flex items-center gap-1 p-1 rounded-2xl bg-zinc-900 border border-white/10 w-max shadow-xl"
        >
            {tabs.map((tab) => {
                const isActive = activeId === tab.id;
                return (
                    <button
                        key={tab.id}
                        onClick={() => setActiveId(tab.id)}
                        className={`relative px-5 py-2 rounded-xl text-sm font-medium transition-colors duration-200 ${isActive ? "text-white" : "text-zinc-500 hover:text-zinc-300"
                            }`}
                    >
                        {isActive && (
                            <motion.span
                                layoutId="magnet-tab-bg"
                                className="absolute inset-0 rounded-xl bg-indigo-500/20 border border-indigo-500/30"
                                transition={{ type: "spring", stiffness: 500, damping: 40 }}
                            />
                        )}
                        <span className="relative z-10">{tab.label}</span>
                    </button>
                );
            })}
        </motion.div>
    );
}