---
import type { Page } from "astro";
import LinkButton from "./LinkButton.astro";
import type { CollectionEntry } from "astro:content";

export interface Props {
  page: Page<CollectionEntry<"blog">>;
}

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

{
  page.lastPage > 1 && (
    <nav class="pagination-wrapper" aria-label="Pagination">
      <LinkButton
        disabled={!page.url.prev}
        href={page.url.prev as string}
        className={`mr-4 select-none ${page.url.prev ? "" : "disabled"}`}
        ariaLabel="Previous"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class:list={[{ "disabled-svg": !page.url.prev }]}
        >
          <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>
      {page.currentPage} / {page.lastPage}
      <LinkButton
        disabled={!page.url.next}
        href={page.url.next as string}
        className={`mx-4 select-none ${page.url.next ? "" : "disabled"}`}
        ariaLabel="Next"
      >
        Next
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class:list={[{ "disabled-svg": !page.url.next }]}
        >
          <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>
  )
}

<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>