Glass Dock

"use client";

import { useRef } from "react";
import { motion, useMotionValue, useSpring, useTransform, type MotionValue } from "framer-motion";
import { Icon } from "@iconify/react";

interface DockItem {
    name: string;
    icon: string;
    href?: string;
}

interface GlassDockProps {
    items: DockItem[];
}

function DockIcon({
    item,
    mouseX,
}: {
    item: DockItem;
    mouseX: MotionValue<number>;
}) {
    const ref = useRef<HTMLDivElement>(null);

    const distance = useTransform(mouseX, (val) => {
        const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
        return val - bounds.x - bounds.width / 2;
    });

    const widthSync = useTransform(distance, [-150, 0, 150], [40, 80, 40]);
    const width = useSpring(widthSync, { mass: 0.1, stiffness: 150, damping: 12 });

    return (
        <motion.div
            ref={ref}
            style={{ width, height: width }}
            className="flex items-center justify-center rounded-2xl bg-white/10 border border-white/20 backdrop-blur-xl hover:bg-white/20 transition-colors shadow-[0_4px_24px_rgba(0,0,0,0.5)] cursor-pointer group relative origin-bottom"
        >
            {/* Tooltip */}
            <div className="absolute top-0 -translate-y-12 opacity-0 group-hover:opacity-100 group-hover:-translate-y-16 transition-all duration-200 pointer-events-none px-3 py-1.5 rounded-lg bg-zinc-900 border border-white/10 text-xs text-white font-medium whitespace-nowrap shadow-xl">
                {item.name}
            </div>
            <Icon icon={item.icon} className="text-white w-1/2 h-1/2" />
        </motion.div>
    );
}

export function GlassDock({ items }: GlassDockProps) {
    const mouseX = useMotionValue(Infinity);

    return (
        <motion.div
            onMouseMove={(e) => mouseX.set(e.pageX)}
            onMouseLeave={() => mouseX.set(Infinity)}
            className="flex h-16 items-end gap-3 px-4 py-3 rounded-3xl bg-zinc-900/40 border border-white/10 backdrop-blur-2xl shadow-2xl mx-auto w-max"
        >
            {items.map((item) => (
                <DockIcon key={item.name} item={item} mouseX={mouseX} />
            ))}
        </motion.div>
    );
}