Peek Image Index

"use client";

import { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useMotionValue, useSpring, useTransform } from "motion/react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  PeekImageIndex                                                     */
/* ------------------------------------------------------------------ */

export interface HoverImageItem {
  label: string;
  /** Still preview [Optional if video given] */
  image?: string;
  /** Looping muted clip previewed instead of a still [Optional] */
  video?: string;
  imageAlt?: string;
}

interface PeekImageIndexProps {
  items: HoverImageItem[];
  /** Preview width in px at full container size [Optional, default: 220] */
  imageWidth?: number;
  /** Gap between preview and labels in px [Optional, default: 40] */
  imageGap?: number;
  className?: string;
}

const REVEAL_EASE = [0.23, 1, 0.32, 1] as const;

/**
 * A text list whose rows reveal a square media preview beside them on hover — stills or looping clips per item:
 * the preview springs to the hovered row's vertical center, non-hovered rows
 * dim and the active row slides in. Sizes scale down responsively so the whole
 * thing stays legible in narrow containers.
 * @param {HoverImageItem[]} items - Rows with label + preview image [Required]
 * @param {number} imageWidth - Preview width in px [Optional, default: 220]
 * @param {number} imageGap - Gap between preview and labels [Optional, default: 40]
 */
export function PeekImageIndex({
  items,
  imageWidth = 220,
  imageGap = 40,
  className,
}: PeekImageIndexProps) {
  const [active, setActive] = useState<number | null>(null);
  const [width, setWidth] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);
  const rowRefs = useRef<(HTMLDivElement | null)[]>([]);

  // Scale down proportionally in tight containers so nothing overflows.
  const previewWidth = width > 0 ? Math.min(imageWidth, width * 0.28) : imageWidth;
  const previewGap = width > 0 ? Math.min(imageGap, width * 0.05) : imageGap;
  const labelSize = width > 0 ? Math.min(Math.max(width * 0.2, 18), 62) : 30;

  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    const ro = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
    ro.observe(el);
    setWidth(el.clientWidth);
    return () => ro.disconnect();
  }, []);

  const centerY = useMotionValue(0);
  const springY = useSpring(centerY, { stiffness: 200, damping: 18, mass: 0.6 });
  const topY = useTransform(springY, (v) => v - previewWidth / 2);

  const focusRow = (index: number) => {
    setActive(index);
    const row = rowRefs.current[index];
    const container = containerRef.current;
    if (row && container) {
      const r = row.getBoundingClientRect();
      const c = container.getBoundingClientRect();
      centerY.set(r.top - c.top + r.height / 2);
    }
  };

  return (
    <div
      ref={containerRef}
      className={cn("flex flex-row items-start", className)}
    >
      <div
        className="relative flex-shrink-0 self-stretch"
        style={{ width: previewWidth, marginRight: previewGap }}
      >
        <motion.div
          className="absolute left-0 w-full"
          style={{ top: topY }}
          animate={{
            opacity: active !== null ? 1 : 0,
            scale: active !== null ? 1 : 0.94,
            filter: active !== null ? "blur(0px)" : "blur(6px)",
          }}
          transition={{ duration: 0.25, ease: REVEAL_EASE }}
        >
          <AnimatePresence mode="popLayout">
            {active !== null &&
              (items[active].video ? (
                <motion.video
                  key={active}
                  src={items[active].video}
                  aria-label={items[active].imageAlt ?? ""}
                  className="aspect-square w-full rounded-2xl object-cover"
                  autoPlay
                  muted
                  loop
                  playsInline
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.18 }}
                />
              ) : (
                <motion.img
                  key={active}
                  src={items[active].image}
                  alt={items[active].imageAlt ?? ""}
                  className="aspect-square w-full rounded-2xl object-cover"
                  loading="lazy"
                  decoding="async"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.18 }}
                />
              ))}
          </AnimatePresence>
        </motion.div>
      </div>

      <div className="flex flex-col">
        {items.map((item, index) => (
          <motion.div
            key={item.label}
            ref={(el) => {
              rowRefs.current[index] = el;
            }}
            className="cursor-default select-none"
            animate={{
              x: active === index ? 16 : 0,
              opacity: active !== null && active !== index ? 0.18 : 1,
            }}
            transition={{ type: "spring", stiffness: 380, damping: 30 }}
            onHoverStart={() => focusRow(index)}
            onHoverEnd={() => setActive(null)}
          >
            <span
              className="block py-1 font-bold leading-tight tracking-tight text-zinc-900 dark:text-zinc-100"
              style={{ fontSize: labelSize }}
            >
              {item.label}
            </span>
          </motion.div>
        ))}
      </div>
    </div>
  );
}