Dock

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

type DockItem = { icon: React.ReactNode; label: string };
type DockProps = { items: DockItem[]; magnification?: number };

const ITEM_SIZE = 48;
const PROXIMITY = 100;

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

  const distance = useTransform(mouseX, (val) => {
    if (!ref.current) return PROXIMITY * 2;
    const bounds = ref.current.getBoundingClientRect();
    return val - (bounds.left + bounds.width / 2);
  });

  const scale = useTransform(distance, [-PROXIMITY, 0, PROXIMITY], [1, magnification, 1]);
  const springScale = useSpring(scale, { stiffness: 350, damping: 25 });

  return (
    <motion.div ref={ref} className="mp-dock-item"
      style={{ scale: springScale, width: ITEM_SIZE, height: ITEM_SIZE }}
      title={item.label}
    >
      {item.icon}
    </motion.div>
  );
}

export function Dock({ items, magnification = 1.6 }: DockProps) {
  const mouseX = useMotionValue(Infinity);
  return (
    <motion.div className="mp-dock"
      onMouseMove={(e) => mouseX.set(e.clientX)}
      onMouseLeave={() => mouseX.set(Infinity)}
    >
      {items.map((item, i) => (
        <DockIcon key={i} item={item} mouseX={mouseX} magnification={magnification} />
      ))}
    </motion.div>
  );
}