---
import type { CollectionEntry } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Main from "@layouts/Main.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import Pagination from "@components/Pagination.astro";
import BlogCard from "../components/BlogCard.astro";
import { Button } from "react-bulma-components";
import { Icon } from "astro-icon/components";

export interface Props {
  currentPage: number;
  totalPages: number;
  paginatedPosts: CollectionEntry<"blog">[];
}

const { currentPage, totalPages, paginatedPosts} = Astro.props;
---

<Layout pageTitle="Blog">
  <Header activeNav="blog" />
  <Main pageTitle="Blog" pageDesc="All the articles I've posted.">
    <a href="/rss.xml">
      <Button className="mb-5">
        <Icon name="fa6-solid:rss" />
        <span class="ml-2">RSS Feed</span>
      </Button>
    </a>
    <div>
      {
        paginatedPosts.map(({ data, slug }) => (
          <BlogCard href={`/blog/${slug}/`} frontmatter={data} />
        ))
      }
    </div>
  </Main>

  <Pagination
    {currentPage}
    {totalPages}
    prevUrl={`/blog${currentPage - 1 !== 1 ? "/" + (currentPage - 1) : ""}/`}
    nextUrl={`/blog/${currentPage + 1}/`}
  />

  <Footer />
</Layout>
