---
import { plainLabel } from "@/lib/utils/textConverter";
import { Icon } from "@astrojs/starlight/components";

const { dir, pagination } = Astro.locals.starlightRoute;
const { prev, next } = pagination;
const isRtl = dir === "rtl";
---

<div class="pagination-links print:hidden" dir={dir}>
  {
    prev && (
      <a href={prev.href} rel="prev">
        <Icon name={isRtl ? "right-caret" : "left-caret"} size="2rem" />
        <span>
          <span class="link-head"> {Astro.locals.t("page.previousLink")}</span>
          <br />
          <span class="link-title">{plainLabel(prev.label)}</span>
        </span>
      </a>
    )
  }
  {
    next && (
      <a href={next.href} rel="next">
        <Icon name={isRtl ? "left-caret" : "right-caret"} size="2rem" />
        <span>
          <span class="link-head">{Astro.locals.t("page.nextLink")}</span>
          <br />
          <span class="link-title">{plainLabel(next.label)}</span>
        </span>
      </a>
    )
  }
</div>

<style>
  @layer starlight.core {
    .pagination-links {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
      gap: 1rem;
    }

    a {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.5rem;
      width: 100%;
      flex-basis: calc(50% - 0.5rem);
      flex-grow: 1;
      /* border: 1px solid var(--sl-color-gray-5);
      border-radius: 0.5rem; */
      padding: 1rem;
      text-decoration: none;
      color: var(--sl-color-gray-2);
      overflow-wrap: anywhere;
      align-items: end;
    }
    [rel="next"] {
      justify-content: end;
      text-align: end;
      flex-direction: row-reverse;
    }
    a:hover {
      border-color: var(--sl-color-gray-2);
    }
    .link-head {
      font-size: 14px;
      margin-bottom: 4px;
    }

    .link-title {
      color: var(--sl-color-white);
      font-size: 20px;
      line-height: var(--sl-line-height-headings);
    }

    svg {
      flex-shrink: 0;
    }
  }
</style>
