---
import { SITE } from "@config";
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 Card from "@components/Card";
import LinkButton from "@components/LinkButton.astro";
import slugify from "@utils/slugify";
import type { CollectionEntry } from "astro:content";

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

const { pageNum, totalPages, posts } = Astro.props;

const prev = pageNum > 1 ? "" : "disabled";
const next = pageNum < totalPages ? "" : "disabled";
---

<Layout title={`Posts | ${SITE.title}`}>
  <Header activeNav="posts" />
  <Main pageTitle="Posts" pageDesc="All the articles I've posted.">
    <ul>
      {
        posts.map(({ data }) => (
          <Card href={`/posts/${slugify(data)}`} frontmatter={data} />
        ))
      }
    </ul>
  </Main>

  {
    totalPages > 1 && (
      <nav class="pagination-wrapper" aria-label="Pagination">
        <LinkButton
          disabled={prev === "disabled"}
          href={`/posts${pageNum - 1 !== 1 ? "/" + (pageNum - 1) : ""}`}
          className={`mr-4 select-none ${prev}`}
          ariaLabel="Previous"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class={`${prev}-svg`}>
            <path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z" />
          </svg>
          Prev
        </LinkButton>
        <LinkButton
          disabled={next === "disabled"}
          href={`/posts/${pageNum + 1}`}
          className={`ml-4 select-none ${next}`}
          ariaLabel="Next"
        >
          Next
          <svg xmlns="http://www.w3.org/2000/svg" class={`${next}-svg`}>
            <path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z" />
          </svg>
        </LinkButton>
      </nav>
    )
  }
  <Footer noMarginTop={totalPages > 1} />
</Layout>

<style>
  .pagination-wrapper {
    @apply mb-8 mt-auto flex justify-center;
  }
  .disabled {
    @apply pointer-events-none select-none opacity-50 hover:text-skin-base group-hover:fill-skin-base;
  }
  .disabled-svg {
    @apply group-hover:!fill-skin-base;
  }
</style>