import { Suspense } from "react";
import { BlogListPage } from "@blog/next-rsc";
import { Subscribe } from "@blog";
import { blogConfig } from "@/lib/blog-config";
import Header from "@/components/header";
import Footer from "@/components/footer";
import { BlogList } from "./blog-list";

export default async function Page() {
  const initialPosts = await blogConfig.feed.fetchAllDocuments();
  return (
    <BlogListPage
      config={blogConfig}
      header={<Header />}
      footer={<Footer />}
      hero={
        <>
          <h1 className="text-pretty text-4xl font-semibold tracking-tight text-foreground sm:text-5xl">
            The Dialogue Layer
          </h1>
          <p className="mt-6 text-xl/8 text-muted-foreground">
            Knowledge lives in the conversations running beneath the formal
            systems. Organizations are dialogic systems, and the action happens
            in a layer most leaders don&apos;t see or design for.
          </p>
          <div className="mt-8">
            <Subscribe publicationUri={blogConfig.sequoia.publicationUri} />
          </div>
        </>
      }
    >
      <Suspense fallback={null}>
        <BlogList initialPosts={initialPosts} />
      </Suspense>
    </BlogListPage>
  );
}
