import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { SectionHeader } from "@/components/shared/SectionHeader";
import { WritingListClient } from "@/components/writing/WritingListClient";
import { getAllPosts } from "@/lib/db/posts";

interface Props {
  params: Promise<{ locale: string }>;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "writing" });
  return { title: t("title"), description: t("subtitle") };
}

export const dynamic = "force-dynamic";

export default async function WritingPage({ params }: Props) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "writing" });
  const posts = await getAllPosts(locale);

  // Flatten tags for the component
  const flatPosts = posts.map((p) => ({
    ...p,
    tags: p.tags.map((pt) => pt.tag),
  }));

  return (
    <div className="relative z-10 mx-auto max-w-6xl px-6 py-24 pt-32">
      <SectionHeader label="writing" />
      <div className="mb-12">
        <h1 className="text-4xl font-bold text-text-primary md:text-5xl">{t("title")}</h1>
        <p className="mt-4 max-w-2xl text-text-secondary">{t("subtitle")}</p>
      </div>
      <WritingListClient posts={flatPosts} />
    </div>
  );
}
