// List whose items enter one after another (overlapping action). Trailing items
// settle with more follow-through (`drag`). `cap` is the per-item delay limit:
// keep the default 50ms for UI lists, raise it (120–150) for showcase sections.
import type { ReactNode } from "react";
import { enter, type TransitionKind } from "twelve-principles";
import { useCascade } from "twelve-principles/react";

export interface CascadeListProps {
  items: readonly { id: string; content: ReactNode }[];
  kind?: TransitionKind;
  /** Change this value to replay the cascade (e.g. after a filter change). */
  replayKey?: unknown;
  showy?: boolean;
}

export function CascadeList({ items, kind = "rise", replayKey, showy = false }: CascadeListProps) {
  const ref = useCascade<HTMLUListElement>((p) => enter(kind, { personality: p }), {
    each: showy ? 120 : 30,
    cap: showy ? 150 : undefined,
    total: showy ? 900 : 300,
    drag: showy ? 0.15 : 0.05,
    trigger: replayKey,
  });
  return (
    <ul ref={ref}>
      {items.map((item) => (
        <li key={item.id}>{item.content}</li>
      ))}
    </ul>
  );
}