---
import LinkButton from "./LinkButton.astro";
import { Icon } from 'astro-icon/components'

export interface Props {
  currentPage: number;
  totalPages: number;
  prevUrl: string;
  nextUrl: string;
}

const { currentPage, totalPages, prevUrl, nextUrl } = Astro.props;

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

{
  totalPages > 1 && (
    <nav class="pagination-wrapper" aria-label="Pagination">
      <LinkButton
        disabled={prev === "disabled"}
        href={prevUrl}
        className={`mr-4 select-none ${prev}`}
        ariaLabel="Previous"
      >
        <Icon name="fa6-solid:arrow-left" />
        Prev
      </LinkButton>
      {currentPage} / {totalPages}
      <LinkButton
        disabled={next === "disabled"}
        href={nextUrl}
        className={`ml-4 select-none ${next}`}
        ariaLabel="Next"
      >
        Next
        <Icon name="fa6-solid:arrow-right" />
      </LinkButton>
    </nav>
  )
}

<style>
  .pagination-wrapper {
      margin-left: auto;
      margin-right: auto;
  }
  .disabled {
    @apply pointer-events-none select-none opacity-50 hover:text-skin-base group-hover:fill-skin-base;
  }
  .disabled-svg {
    group-hover: !fill-skin-base;
  }
</style>
