---
import BaseLayout from "@/layouts/BaseLayout.astro";
import { getCollection } from "astro:content";
import type { CollectionEntry } from "astro:content";
import Headline from "@/components/ui/Headline.astro";
import Pagination from "@/components/ui/Pagination.astro";
import PostItem from "@/components/blog/PostItem.astro";
import { buildPaginatedPaths } from "@/utils/paginate";

interface Props {
  page: {
    data: CollectionEntry<"blog">[];
    total: number;
    currentPage: number;
    lastPage: number;
    url: { prev?: string; next?: string };
  };
}

export async function getStaticPaths() {
  const blogEntries = await getCollection("blog");
  const sortedPosts = blogEntries
    .filter((post) => post.data && post.data.pubDate)
    .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());

  return buildPaginatedPaths(sortedPosts, "/blog").map(
    ({ pageParam, page }) => ({
      params: { page: pageParam },
      props: { page },
    }),
  );
}

const { page } = Astro.props as Props;
const blog = page.data;

const metadata = {
  title: "Blog",
  description:
    "Chia sẻ hành trình, trải nghiệm và những câu chuyện thú vị của Ba Lô & Dép Lào trên mọi nẻo đường.",
};
---

<BaseLayout metadata={metadata}>
  <section class="relative px-4 py-8 sm:px-6 lg:px-8 md:py-12">
    <div class="absolute inset-0 z-0">
      <div
        class="absolute inset-0 bg-linear-to-br from-blue-500/5 via-transparent to-pink-500/5"
      >
      </div>
    </div>
    <div class="relative mx-auto max-w-5xl">
      <Headline
        tagline="Blog"
        title="Nhật ký hành trình của Ba Lô & Dép Lào"
        classes={{
          container: "reveal mb-12 text-center",
          title:
            "font-heading mb-4 text-4xl font-bold tracking-tight text-foreground md:text-6xl",
          subtitle: "mx-auto max-w-3xl text-xl text-muted-foreground",
        }}
      />

      <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
        {blog.map((post) => <PostItem post={post} />)}
      </div>
      <Pagination page={page} />
    </div>
  </section>
</BaseLayout>
