---
import Layout from "@/layouts/Layout.astro";
import PageHeader from "@/components/elements/PageHeader.astro";
import BlogSection from "@/components/sections/BlogSection.astro";
import { getCollection } from "astro:content";

// 定义每页显示的文章数量
export const POSTS_PER_PAGE = 6;

// 生成分页路径
export async function getStaticPaths() {
  const allPosts = await getCollection("post");
  // 使用顶层定义的POSTS_PER_PAGE常量
  const totalPages = Math.ceil(allPosts.length / POSTS_PER_PAGE);

  return Array.from({ length: totalPages }, (_, i) => {
    const page = i + 1;
    return {
      params: { page: page.toString() },
      props: { page }
    };
  });
}

// 添加类型注解
interface Props {
  page: string;
}

const { page }: Props = Astro.props;
const currentPage = parseInt(page);
---

<Layout title={`Blog - Page ${currentPage}`}>
  <section class="relative z-20 container mx-auto my-12 px-7 lg:px-0">
    <PageHeader
      title="Blog"
      description="Explore my thoughts on design and development, the convergence of thinking and innovation. Feel free to follow the updates!"
    />
  </section>
  <section class="relative z-20 mx-auto my-12 px-7 lg:px-0">
    <div class="mt-12">
      <BlogSection
        title="All Articles"
        listPage={true}
        pagination={{
          enable: true,
          currentPage: currentPage
        }}
        postsPerPage={POSTS_PER_PAGE}
      />
    </div>
  </section>
</Layout>