import { getAllPosts, getCategory, type BlogCategory } from "@/lib/blog";
import { BlogListing } from "./blog-listing";

/**
 * Shared listing page for /resources ("All", category omitted) and
 * /resources/[category]. Loads ALL posts so the filter pills can be built from
 * real data; each pill is a real link to its own route (see BlogListing), so
 * the URL always matches what's shown and back/forward work correctly.
 */
export async function CategoryListingPage({ category }: { category?: BlogCategory }) {
  const [posts, meta] = await Promise.all([
    getAllPosts(),
    category ? getCategory(category) : Promise.resolve(undefined),
  ]);

  const currentLabel = meta?.label ?? "";
  const allLabels = Array.from(new Set(posts.map((p) => p.tag).filter(Boolean)));
  const others = currentLabel ? allLabels.filter((t) => t !== currentLabel) : allLabels;
  const tags = ["All", ...(currentLabel ? [currentLabel] : []), ...others];
  const activeTag = currentLabel || "All";

  return (
    // Soft gradient header band — matches the article (detail) page header.
    <section className="wash-aurora relative overflow-hidden">
      <div className="mx-auto max-w-7xl px-6 pb-16 pt-36 sm:pt-44 lg:px-10">
        <BlogListing posts={posts} tags={tags} activeTag={activeTag} />
      </div>
    </section>
  );
}