---
import { type SidebarItemLink } from "../../config";
import { getIsRtlFromUrl, getLanguageFromURL } from "../../languages";
import { paginate } from "../../utils/pagination";
import LeftArrow from "../icons/leftArrow.astro";
import RightArrow from "../icons/rightArrow.astro";

const currentPage = Astro.url.pathname;
const hasTrailing = currentPage.endsWith("/");
const currentPageMatch = currentPage.slice(
  1,
  hasTrailing ? -1 : currentPage.length,
) as SidebarItemLink;

const langCode = getLanguageFromURL(currentPage);
const { next, prev } = paginate(langCode, currentPageMatch);

const { pathname } = Astro.url;
const isRtl = getIsRtlFromUrl(pathname);
---

<div
  class="mb-8 mt-16 flex flex-row items-center justify-between px-4 pt-4 font-medium text-t3-purple-800 lg:px-8 dark:text-t3-purple-200"
>
  <div>
    {
      prev ? (
        <a
          class="flex items-center underline-offset-2 hover:text-t3-purple-400 hover:underline dark:hover:text-t3-purple-100"
          rel="prev"
          href={Astro.site?.pathname + prev.link}
        >
          <>
            {isRtl ? <RightArrow /> : <LeftArrow />}
            {prev.text}
          </>
        </a>
      ) : null
    }
  </div>
  <div>
    {
      next ? (
        <a
          rel="next"
          class="flex items-center underline-offset-2 hover:text-t3-purple-400 hover:underline dark:hover:text-t3-purple-100"
          href={Astro.site?.pathname + next.link}
        >
          <>
            {next.text}
            {isRtl ? <LeftArrow /> : <RightArrow />}
          </>
        </a>
      ) : null
    }
  </div>
</div>

<hr class="border-t-2 border-t3-purple-300/20" />
