Hover Expand Gallery

"use client";

import { Fragment, useState } from "react";
import { motion } from "motion/react";

import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  Types                                                              */
/* ------------------------------------------------------------------ */

export interface HoverExpandItem {
  label: string;
  /** Trailing tag, e.g. a country or year. [Optional] */
  sublabel?: string;
  image: string;
  imageAlt?: string;
  /** Short line revealed while the row is expanded. [Optional] */
  description?: string;
}

export interface HoverExpandGalleryProps {
  items: HoverExpandItem[];
  /** Row height when collapsed, in px. [Optional, default: 64] */
  collapsedHeight?: number;
  /** Row height when expanded, in px. [Optional, default: 320] */
  expandedHeight?: number;
  /** Controlled expanded row. Omit for hover/focus behavior. [Optional] */
  activeIndex?: number | null;
  /** Fires when hover or focus changes the expanded row. [Optional] */
  onActiveChange?: (index: number | null) => void;
  className?: string;
}

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

/* ------------------------------------------------------------------ */
/*  HoverExpandGallery                                                 */
/* ------------------------------------------------------------------ */

/**
 * An index-style list where hovering (or keyboard focus) previews a row
 * open over its full-bleed photo, clicking pins it so it survives the
 * pointer leaving, clicking again or pressing Escape releases it, and
 * sibling rows dim. Rows are real buttons with truthful aria-expanded;
 * on touch, tapping toggles the pin directly. Pass `activeIndex` to
 * drive it programmatically instead.
 * @param {HoverExpandItem[]} items - Rows to render [Required]
 * @param {number} collapsedHeight - Closed row height in px [Optional, default: 64]
 * @param {number} expandedHeight - Open row height in px [Optional, default: 320]
 * @param {number|null} activeIndex - Controlled expanded row [Optional]
 */
export function HoverExpandGallery({
  items,
  collapsedHeight = 64,
  expandedHeight = 320,
  activeIndex,
  onActiveChange,
  className,
}: HoverExpandGalleryProps) {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
  const [pinnedIndex, setPinnedIndex] = useState<number | null>(null);
  const isControlled = activeIndex !== undefined;
  const openIndex = isControlled ? activeIndex : (pinnedIndex ?? hoveredIndex);

  /** Hover/focus preview — ignored while a row is pinned. */
  const preview = (index: number | null) => {
    if (isControlled) {
      onActiveChange?.(index);
      return;
    }
    if (pinnedIndex !== null) return;
    setHoveredIndex(index);
    onActiveChange?.(index);
  };

  /** Click/tap pins the row open; a second activation releases it. */
  const togglePin = (index: number) => {
    if (isControlled) {
      onActiveChange?.(openIndex === index ? null : index);
      return;
    }
    if (pinnedIndex === index) {
      setPinnedIndex(null);
      setHoveredIndex(null);
      onActiveChange?.(null);
    } else {
      setPinnedIndex(index);
      onActiveChange?.(index);
    }
  };

  const dismiss = () => {
    if (isControlled) {
      onActiveChange?.(null);
      return;
    }
    setPinnedIndex(null);
    setHoveredIndex(null);
    onActiveChange?.(null);
  };

  const divider = (
    <div className="w-full border-t border-zinc-900/15 dark:border-white/15" />
  );

  return (
    <div className={cn("flex w-full flex-col", className)}>
      {divider}

      {items.map((item, i) => {
        const isOpen = openIndex === i;
        const isOtherOpen = openIndex !== null && !isOpen;

        return (
          <Fragment key={item.label}>
            <motion.button
              type="button"
              aria-expanded={isOpen}
              className="relative w-full cursor-pointer overflow-hidden text-left outline-none font-medium"
              animate={{
                height: isOpen ? expandedHeight : collapsedHeight,
                opacity: isOtherOpen ? 0.38 : 1,
              }}
              transition={{
                height: { type: "spring", stiffness: 280, damping: 32, mass: 0.9 },
                opacity: { duration: 0.22, ease: "easeOut" },
              }}
              onPointerEnter={(e) => {
                if (e.pointerType === "mouse") preview(i);
              }}
              onPointerLeave={(e) => {
                if (e.pointerType === "mouse") preview(null);
              }}
              onClick={() => togglePin(i)}
              onFocus={(e) => {
                // Keyboard focus previews; pointer-driven focus is handled
                // by the hover/click paths above.
                if (e.currentTarget.matches(":focus-visible")) preview(i);
              }}
              onBlur={() => preview(null)}
              onKeyDown={(e) => {
                if (e.key === "Escape") dismiss();
              }}
            >
              <motion.div
                className="absolute inset-0 h-full w-full"
                initial={false}
                animate={{ opacity: isOpen ? 1 : 0, scale: isOpen ? 1 : 1.06 }}
                transition={{
                  opacity: { duration: 0.45, ease: EASE_OUT },
                  scale: { duration: 0.55, ease: EASE_OUT },
                }}
              >
                <img
                  src={item.image}
                  alt={item.imageAlt ?? ""}
                  className="h-full w-full object-cover"
                  loading="lazy"
                  decoding="async"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-black/10" />
              </motion.div>

              <div className="absolute inset-0 flex items-end px-5 pb-4">
                <div className="flex w-full items-end justify-between gap-4">
                  <div className="flex min-w-0 items-baseline gap-3">
                    <span
                      className={cn(
                        "shrink-0 text-xs tabular-nums transition-[color,opacity] duration-200",
                        isOpen ? "text-white/55" : "text-current opacity-40",
                      )}
                    >
                      {String(i + 1).padStart(2, "0")}
                    </span>

                    <span
                      className={cn(
                        "truncate font-semibold tracking-tight transition-[color,opacity] duration-200",
                        isOpen ? "text-white" : "text-current",
                      )}
                      style={{ fontSize: "clamp(1.1rem, 2.2vw, 1.5rem)" }}
                    >
                      {item.label}
                    </span>

                    {item.description && (
                      <motion.span
                        className="hidden truncate text-sm text-white/70 sm:block"
                        initial={{ opacity: 0, x: -8 }}
                        animate={{ opacity: isOpen ? 1 : 0, x: isOpen ? 0 : -8 }}
                        transition={{
                          duration: 0.3,
                          delay: isOpen ? 0.12 : 0,
                          ease: EASE_OUT,
                        }}
                      >
                        {item.description}
                      </motion.span>
                    )}
                  </div>

                  {item.sublabel && (
                    <span
                      className={cn(
                        "shrink-0 text-xs uppercase tracking-widest transition-[color,opacity] duration-200",
                        isOpen ? "text-white/55" : "text-current opacity-45",
                      )}
                    >
                      {item.sublabel}
                    </span>
                  )}
                </div>
              </div>
            </motion.button>

            {divider}
          </Fragment>
        );
      })}
    </div>
  );
}