Spotlight Navbar

"use client";

import { useRef, useState, useEffect } from "react";
import { motion } from "framer-motion";

interface SpotlightNavbarProps {
    items: {
        name: string;
        href: string;
    }[];
}

export function SpotlightNavbar({ items }: SpotlightNavbarProps) {
    const navRef = useRef<HTMLElement>(null);
    const [position, setPosition] = useState<{ x: number; y: number } | null>(null);
    const [opacity, setOpacity] = useState(0);

    const handleMouseMove = (e: React.MouseEvent<HTMLElement>) => {
        if (!navRef.current) return;
        const rect = navRef.current.getBoundingClientRect();
        setPosition({
            x: e.clientX - rect.left,
            y: e.clientY - rect.top,
        });
    };

    return (
        <nav
            ref={navRef}
            onMouseMove={handleMouseMove}
            onMouseEnter={() => setOpacity(1)}
            onMouseLeave={() => setOpacity(0)}
            className="relative px-4 py-2 flex items-center gap-2 rounded-full border border-white/10 bg-zinc-950/50 backdrop-blur-xl overflow-hidden pointer-events-auto shadow-2xl shadow-black/50"
        >
            {/* The Spotlight Glow */}
            <motion.div
                animate={{
                    opacity,
                    left: position?.x ? position.x - 100 : "50%",
                    top: position?.y ? position.y - 100 : "50%",
                }}
                transition={{ type: "tween", ease: "backOut", duration: 0.2 }}
                className="pointer-events-none absolute w-[200px] h-[200px] bg-indigo-500/20 rounded-full blur-3xl z-0"
            />

            {items.map((item) => (
                <button
                    key={item.name}
                    type="button"
                    className="relative z-10 px-4 py-1.5 text-sm font-medium text-zinc-400 hover:text-white transition-colors duration-300 rounded-full group outline-none"
                >
                    <span className="relative z-10">{item.name}</span>
                    <span className="absolute inset-x-0 -bottom-px h-px bg-gradient-to-r from-transparent via-indigo-500/0 to-transparent group-hover:via-indigo-500/50 transition-all duration-300" />
                </button>
            ))}
        </nav>
    );
}