---
import type { Page } from "astro";
import type { CollectionEntry } from "astro:content";
import IconArrowLeft from "@/assets/icons/IconArrowLeft.svg";
import IconArrowRight from "@/assets/icons/IconArrowRight.svg";
import LinkButton from "./LinkButton.astro";

type Props = {
  page: Page<CollectionEntry<"blog">>;
};

const { page } = Astro.props;
---

{
  page.lastPage > 1 && (
    <nav
      class="mt-auto mb-8 flex justify-center"
      role="navigation"
      aria-label="Pagination Navigation"
    >
      <LinkButton
        disabled={!page.url.prev}
        href={page.url.prev as string}
        class:list={["me-4 select-none", { "opacity-50": !page.url.prev }]}
        aria-label="Goto Previous Page"
      >
        <IconArrowLeft class="inline-block rtl:rotate-180" />
        Prev
      </LinkButton>
      {page.currentPage} / {page.lastPage}
      <LinkButton
        disabled={!page.url.next}
        href={page.url.next as string}
        class:list={["ms-4 select-none", { "opacity-50": !page.url.next }]}
        aria-label="Goto Next Page"
      >
        Next
        <IconArrowRight class="inline-block rtl:rotate-180" />
      </LinkButton>
    </nav>
  )
}