---
import IconArrowLeft from "@/assets/icons/IconArrowLeft.svg";
import IconArrowRight from "@/assets/icons/IconArrowRight.svg";
import { getPostUrl } from "@/utils/getPostPaths";
import { useTranslations } from "@/i18n";
import config from "@/config";

type AdjacentPost = {
  id: string;
  title: string;
  filePath: string | undefined;
} | null;

type Props = {
  prevPost: AdjacentPost;
  nextPost: AdjacentPost;
};

const { prevPost, nextPost } = Astro.props;
const locale = Astro.currentLocale ?? config.site.lang;
const t = useTranslations(locale);
---

<div data-pagefind-ignore class="my-8 grid grid-cols-1 gap-6 sm:grid-cols-2">
  {
    prevPost && (
      <a
        href={getPostUrl(prevPost.id, prevPost.filePath, locale)}
        class="flex w-full gap-1 hover:opacity-75"
      >
        <IconArrowLeft class="inline-block flex-none rtl:rotate-180" />
        <div>
          <span>{t.post.previousPost}</span>
          <div class="text-accent/85 text-sm">{prevPost.title}</div>
        </div>
      </a>
    )
  }
  {
    nextPost && (
      <a
        href={getPostUrl(nextPost.id, nextPost.filePath, locale)}
        class="flex w-full justify-end gap-1 text-end hover:opacity-75 sm:col-start-2"
      >
        <div>
          <span>{t.post.nextPost}</span>
          <div class="text-accent/85 text-sm">{nextPost.title}</div>
        </div>
        <IconArrowRight class="inline-block flex-none rtl:rotate-180" />
      </a>
    )
  }
</div>
