Counter Scroll Wall

"use client";

import { type ReactNode, useEffect, useRef, useState } from "react";
import { motion, useAnimationFrame, useMotionValue } from "motion/react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  CounterScrollWall                                                  */
/* ------------------------------------------------------------------ */

interface CounterScrollWallProps<T> {
  items: T[];
  renderItem: (item: T, index: number) => ReactNode;
  /** Seconds for one full column loop [Optional, default: 20] */
  speed?: number;
  /** 1 or 2 columns — two run in opposite directions [Optional, default: 2] */
  columns?: 1 | 2;
  gap?: number;
  /** Fade height at the top and bottom edges [Optional, default: 120] */
  blurSize?: number;
  /** Ease the wall to a stop while hovered [Optional, default: true] */
  pauseOnHover?: boolean;
  className?: string;
}

function MarqueeColumn<T>({
  items,
  renderItem,
  speed,
  gap,
  reverse = false,
  paused,
}: {
  items: T[];
  renderItem: (item: T, index: number) => ReactNode;
  speed: number;
  gap: number;
  reverse?: boolean;
  paused: boolean;
}) {
  const wrapRef = useRef<HTMLDivElement | null>(null);
  const [singleHeight, setSingleHeight] = useState(0);
  const y = useMotionValue(0);
  const pos = useRef(0);
  const currentSpeed = useRef(0);
  const initialized = useRef(false);

  useEffect(() => {
    const el = wrapRef.current;
    if (!el) return;
    const measure = () => {
      const height = el.scrollHeight / 2;
      if (height <= 0) return;
      setSingleHeight(height);
      if (!initialized.current) {
        pos.current = reverse ? -height : 0;
        y.set(pos.current);
        initialized.current = true;
      }
    };
    const obs = new ResizeObserver(measure);
    obs.observe(el);
    measure();
    return () => obs.disconnect();
  }, [reverse, items, y]);

  useAnimationFrame((_, delta) => {
    if (!singleHeight) return;
    /* Ease toward the target speed so hover-pause decelerates instead of
       freezing — 8% of the gap per frame. */
    const target = paused ? 0 : singleHeight / speed;
    currentSpeed.current += (target - currentSpeed.current) * 0.08;

    const step = currentSpeed.current * (delta / 1000);
    if (reverse) {
      pos.current += step;
      if (pos.current >= 0) pos.current -= singleHeight;
    } else {
      pos.current -= step;
      if (pos.current <= -singleHeight) pos.current += singleHeight;
    }
    y.set(pos.current);
  });

  const doubled = [...items, ...items];
  return (
    <div className="min-w-0 flex-1 overflow-hidden">
      <motion.div ref={wrapRef} style={{ y }}>
        {doubled.map((item, index) => (
          <div key={index} className="w-full" style={{ marginBottom: `${gap}px` }}>
            {renderItem(item, index % items.length)}
          </div>
        ))}
      </motion.div>
    </div>
  );
}

/**
 * Two columns of cards drifting vertically in opposite directions on one
 * rAF clock: each column doubles its content and wraps at half its scroll
 * height for a seamless loop, the reverse column runs 1.25x faster, and
 * hovering eases the whole wall to a stop instead of freezing it. Top and
 * bottom edges dissolve through a mask.
 * @param {T[]} items - Cards to loop [Required]
 * @param {(item, index) => ReactNode} renderItem - Card renderer [Required]
 */
export function CounterScrollWall<T>({
  items,
  renderItem,
  speed = 20,
  columns = 2,
  gap = 16,
  blurSize = 120,
  pauseOnHover = true,
  className,
}: CounterScrollWallProps<T>) {
  const [paused, setPaused] = useState(false);
  const mid = Math.ceil(items.length / 2);
  const col1 = columns === 2 ? items.slice(0, mid) : items;
  const col2 = columns === 2 ? items.slice(mid) : items;
  const mask = `linear-gradient(to bottom, transparent 0%, black ${blurSize}px, black calc(100% - ${blurSize}px), transparent 100%)`;

  return (
    <div
      className={cn("h-full w-full overflow-hidden", className)}
      style={{ maskImage: mask, WebkitMaskImage: mask }}
      onMouseEnter={() => pauseOnHover && setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div className="flex h-full" style={{ gap: `${gap}px` }}>
        <MarqueeColumn
          items={col1.length ? col1 : items}
          renderItem={renderItem}
          speed={speed}
          gap={gap}
          paused={paused}
        />
        {columns === 2 && (
          <MarqueeColumn
            items={col2.length ? col2 : items}
            renderItem={renderItem}
            speed={speed * 1.25}
            gap={gap}
            reverse
            paused={paused}
          />
        )}
      </div>
    </div>
  );
}