---
import { Icon } from "astro-icon";
const { prevUrl, nextUrl, prevText = "Newer posts", nextText = "Older posts" } = Astro.props;
---

{
  (prevUrl || nextUrl) && (
    <div class="container flex">
      <div class="flex flex-row mx-auto container justify-between">
        <a
          href={prevUrl}
          class={`btn font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none mr-2
      ${!prevUrl ? "invisible" : ""}`}
        >
          <div class="flex flex-row align-middle">
            <Icon name="tabler:arrow-left" class="w-6 h-6" />
            <p class="ml-2">{prevText}</p>
          </div>
        </a>
        <a
          href={nextUrl}
          class={`btn font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none ${
            !nextUrl ? "invisible" : ""
          }`}
        >
          <div class="flex flex-row align-middle">
            <span class="mr-2">{nextText}</span>
            <Icon name="tabler:arrow-right" class="w-6 h-6" />
          </div>
        </a>
      </div>
    </div>
  )
}