import {
  Breadcrumb,
  JsonLd,
  PageIntro,
  PostList,
} from "@/components/blog/parts";
import { blog, categories } from "@/lib/blog/config";
import { breadcrumbLd, categoryOf, crumbs } from "@/lib/blog/feeds";
import { listPublishedPosts } from "@/lib/blog/loader";
import { BLOG_PATH, categoryPath } from "@/lib/blog/routes";
import type { Metadata } from "next";
import { notFound } from "next/navigation";

async function postsIn(slug: string) {
  return (await listPublishedPosts()).filter((p) => p.category === slug);
}

export async function generateStaticParams() {
  const posts = await listPublishedPosts();
  return categories
    .filter((c) => posts.some((p) => p.category === c.slug))
    .map((c) => ({ slug: c.slug }));
}

export async function generateMetadata({
  params,
}: PageProps<"/blog/category/[slug]">): Promise<Metadata> {
  const { slug } = await params;
  const category = categoryOf(slug);
  if (!category) return {};
  const title = `${category.name} | ${blog.name}`;
  return {
    title,
    description: category.description,
    alternates: { canonical: categoryPath(slug) },
    openGraph: {
      title,
      description: category.description,
      url: categoryPath(slug),
    },
  };
}

export default async function CategoryPage({
  params,
}: PageProps<"/blog/category/[slug]">) {
  const { slug } = await params;
  const category = categoryOf(slug);
  const posts = category ? await postsIn(slug) : [];
  if (!category || posts.length === 0) notFound();

  return (
    <div className="mx-auto max-w-3xl px-4 py-14 sm:px-6">
      <JsonLd data={breadcrumbLd([crumbs.index, crumbs.category(slug)])} />
      <Breadcrumb
        items={[{ name: "Blog", href: BLOG_PATH }, { name: category.name }]}
      />
      <div className="mt-6">
        <PageIntro title={category.name}>
          <p>{category.intro}</p>
        </PageIntro>
      </div>
      <div className="mt-8">
        <PostList posts={posts} showCategory={false} showTags />
      </div>
    </div>
  );
}