"use client";
import { useMemo } from "react";
import AdImage from "./AdImage";
import { FIXED_300X600, rotateAll, type Ad } from "@/lib/ads";

// Renders the fixed 300x600 at the top (no rotation) followed by EVERY
// 300x250 banner stacked vertically in a shuffled order. Adding more
// 300x250 entries to ads.ts automatically grows this stack.
export default function SidebarAdStack({
  excludeSrcs = [],
  className = "",
}: {
  excludeSrcs?: string[];
  className?: string;
}) {
  const rotating = useMemo<Ad[]>(
    () => rotateAll("300x250", new Set(excludeSrcs)),
    [excludeSrcs.join("|")],
  );

  return (
    <div className={`space-y-4 ${className}`}>
      {FIXED_300X600 && <AdImage ad={FIXED_300X600} priority />}
      {rotating.map((ad) => (
        <AdImage key={ad.src ?? ad.label} ad={ad} />
      ))}
    </div>
  );
}
