---
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 BlogCard from "../components/BlogCard.astro";
import Pagination from "@components/Pagination.astro";
import { SITE } from "@config";

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

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

<Layout title={`Tag: ${tagName} | ${SITE.title}`}>
  <Header activeNav="tags" />
  <Main
    pageTitle={[`Tag:`, `${tagName}`]}
    titleTransition={tag}
    pageDesc={`All the articles with the tag "${tagName}".`}
  >
    <h1 slot="title" transition:name={tag}>{`Tag:${tag}`}</h1>
    <ul>
      {
        paginatedPosts.map(({ data, slug }) => (
          <BlogCard href={`/posts/${slug}/`} frontmatter={data} />
        ))
      }
    </ul>
  </Main>

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

  <Footer noMarginTop={totalPages > 1} />
</Layout>
