---

import type { Page } from 'astro';
import { ChevronDown } from 'lucide-react';

interface Props {
  page: Page;
  label?: string;
}

const { page, label = 'Blog pagination' } = Astro.props;
---

<nav
  aria-label={label}
  class="mx-auto mt-10 flex w-full max-w-3xl items-center justify-end gap-4"
>
  <span>
    Page {page.currentPage} of {page.lastPage}
  </span>
  <span class="grid grid-cols-2 gap-1">
    {
      page.url.prev ? (
        <a
          href={page.url.prev}
          aria-label={`Go to page ${page.currentPage - 1}`}
          class="grid items-center rounded-xs border border-manila-75 bg-manila-50 p-4 dark:border-soot dark:bg-warm-gray intent:bg-manila-dark dark:intent:bg-soot"
        >
          <ChevronDown size={16} className="rotate-90" />
        </a>
      ) : (
        <button
          disabled
          aria-label="Previous page (unavailable)"
          class="grid items-center rounded-xs border border-manila-75 bg-manila-50 p-4 opacity-40 dark:border-soot dark:bg-warm-gray"
        >
          <ChevronDown size={16} className="rotate-90" />
        </button>
      )
    }
    {
      page.url.next ? (
        <a
          href={page.url.next}
          aria-label={`Go to page ${page.currentPage + 1}`}
          class="grid items-center rounded-xs border border-manila-75 bg-manila-50 p-4 dark:border-soot dark:bg-warm-gray intent:bg-manila-dark dark:intent:bg-soot"
        >
          <ChevronDown size={16} className="-rotate-90" />
        </a>
      ) : (
        <button
          disabled
          aria-label="Next page (unavailable)"
          class="grid items-center rounded-xs border border-manila-75 bg-manila-50 p-4 opacity-40 dark:border-soot dark:bg-warm-gray"
        >
          <ChevronDown size={16} className="-rotate-90" />
        </button>
      )
    }
  </span>
</nav>
