---
import type { Locale } from '@i18n/locales';
import { useDict } from '@i18n/t';
import { pathFor } from '@i18n/slugMap';
import { getProjectCards } from '@lib/content';

interface Props {
  locale: Locale;
  currentId: string;
}
const { locale, currentId } = Astro.props;
const d = useDict(locale);
const cards = getProjectCards(locale);
const idx = cards.findIndex((c) => c.id === currentId);
const prev = idx > 0 ? cards[idx - 1] : undefined;
const next = idx < cards.length - 1 ? cards[idx + 1] : undefined;
---

<nav
  class="mt-20 flex flex-col gap-4 border-t border-line pt-8 sm:flex-row sm:items-center sm:justify-between"
  aria-label={d.project.all}
>
  <div>
    {
      prev && (
        <a href={prev.path} class="group inline-flex items-center gap-2 text-body text-ink-muted hover:text-ink">
          <span class="transition-transform group-hover:-translate-x-1">←</span>
          <span>
            <span class="mono-label block">{d.project.prev}</span>
            {prev.name}
          </span>
        </a>
      )
    }
  </div>

  <a href={pathFor('projects', locale)} class="text-body text-accent hover:underline">
    {d.project.all}
  </a>

  <div class="sm:text-right">
    {
      next && (
        <a href={next.path} class="group inline-flex items-center gap-2 text-body text-ink-muted hover:text-ink">
          <span>
            <span class="mono-label block">{d.project.next}</span>
            {next.name}
          </span>
          <span class="transition-transform group-hover:translate-x-1">→</span>
        </a>
      )
    }
  </div>
</nav>
