---
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;

// 根据 Astro v5/v6，对于 SSG 模式下的分页路由，仍然需要使用 getStaticPaths()
// 这是因为需要告诉 Astro 在构建时生成哪些页面
// 注意：params 必须是字符串类型（符合 v6 要求）
export async function getStaticPaths() {
  const allPosts = await getCollection("post");

  // 按发布日期排序文章
  let posts = allPosts.sort(
    (a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf()
  );

  // 查找特色文章，在列表页需要从主列表中移除
  const featuredPost = posts.find((post) => post.data.featured);
  if (featuredPost) {
    posts = posts.filter((post) => post.data.featured !== true);
  }

  // 使用移除特色文章后的文章数量计算总页数
  const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);

  // 返回所有分页路径，确保 params.page 是字符串类型（v6 要求）
  return Array.from({ length: totalPages }, (_, i) => {
    const page = i + 1;
    return {
      params: { page: page.toString() },
      props: { page: page.toString() }
    };
  });
}

// 从 props 获取页码（在 SSG 模式下通过 getStaticPaths 传递）
const { page } = 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>