import { For, type JSX, createEffect } from "solid-js";

export type AnimationType = "scale" | "slide" | "fade" | "bounce";

export interface AnimatedListProps<T> {
  items: T[];
  renderItem: (item: T, index: number) => JSX.Element;
  maxVisible?: number;
  gap?: number;
  animation?: AnimationType;
  className?: string;
}

function animationClass(type: AnimationType) {
  switch (type) {
    case "slide": return "animate-list-slide";
    case "fade": return "animate-list-fade";
    case "bounce": return "animate-list-bounce";
    case "scale":
    default: return "animate-list-scale";
  }
}

export function AnimatedList<T extends { id: string | number }>(props: AnimatedListProps<T>) {
  const maxVisible = () => props.maxVisible ?? 8;
  const gap = () => props.gap ?? 12;
  const animType = () => props.animation ?? "scale";
  const visible = () => props.items.slice(0, maxVisible());

  return (
    <div class={`flex flex-col ${props.className ?? ""}`} style={{ gap: `${gap()}px` }}>
      <For each={visible()}>
        {(item, index) => (
          <div
            class={`${animationClass(animType())} will-change-transform`}
            style={{
              "animation-delay": `${index() * 40}ms`,
            }}
          >
            {props.renderItem(item, index())}
          </div>
        )}
      </For>
    </div>
  );
}
