import { fetchTopics } from "@/data/topics";
import { fetchThemes } from "@/data/themes";
import GenerationForm from "@/components/posts/generation-form";
import TopicsView from "@/components/topics/topics-view";
export const revalidate = 30;

type PostsPageProps = {
  searchParams: Promise<{ page?: string; published?: string }>;
};

export default async function PostsPage(props: PostsPageProps) {
  const searchParams = await props.searchParams;
  const page = searchParams?.page ? Number(searchParams.page) : 1;
  const isPublished = searchParams?.published === "true" ? true : searchParams?.published === "false" ? false : undefined;

  const [paginatedTopics, themes] = await Promise.all([fetchTopics(page, isPublished), fetchThemes()]);

  return (
    <div className="space-y-6">
      <header className="flex flex-col gap-2">
        <p className="text-sm uppercase tracking-[0.3em] text-orange-600 dark:text-orange-300">Collections</p>
        <div className="flex flex-col gap-2 lg:flex-row lg:items-end lg:justify-between">
          <div>
            <h1 className="text-3xl font-semibold text-slate-900 dark:text-white">Posts</h1>
            <p className="text-sm text-slate-600 dark:text-slate-400">
              Review every AI generated asset, manage publish states, and filter by platform or copy context.
            </p>
          </div>
        </div>
      </header>
      <GenerationForm themes={themes} />
      <TopicsView pagination={paginatedTopics} />
    </div>
  );
}