import type { Metadata } from "next";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import BlogContent from "./BlogContent";
import { getHomeContent, getPosts } from "@/lib/wordpress";

const PER_PAGE = 9;

export async function generateMetadata(): Promise<Metadata> {
  const content = await getHomeContent();
  return {
    title: `Blog — ${content.siteTitle}`,
    description: content.siteDescription,
    icons: content.siteIcon ? [{ rel: "icon", url: content.siteIcon }] : undefined,
  };
}

export default async function BlogPage() {
  const [content, { posts, totalPages }] = await Promise.all([getHomeContent(), getPosts(100)]);

  return (
    <main className="v4-bg">
      <Header content={content} />
      <section style={{ padding: "72px 0 110px" }}>
        <div className="container">
          <div style={{ maxWidth: 640 }}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color: "#7e6516" }}>
              From the blog
            </div>
            <h1 style={{ fontWeight: 900, fontSize: 52, lineHeight: 1.06, letterSpacing: "-.025em", margin: "16px 0 0", color: "#182233" }}>
              News for <span style={{ color: "#006568" }}>tax professionals.</span>
            </h1>
          </div>

          <BlogContent posts={posts} totalPages={Math.ceil(posts.length / PER_PAGE)} perPage={PER_PAGE} content={content} />
        </div>
      </section>
      <Footer content={content} />
    </main>
  );
}