---
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";
import { useTranslations } from "@/i18n";

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

const { page } = Astro.props;

const t = useTranslations(Astro.currentLocale);
---

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