---
import type { Locale } from '@i18n/locales';
import { useDict } from '@i18n/t';

interface Props {
  locale: Locale;
  sections: { heading: string; anchorId: string }[];
}
const { locale, sections } = Astro.props;
const d = useDict(locale);
---

<nav class="sticky top-24 hidden xl:block" aria-label={d.project.onThisPage}>
  <p class="mono-label mb-3">{d.project.onThisPage}</p>
  <ul class="flex flex-col gap-2 border-l border-line">
    {
      sections.map((s) => (
        <li>
          <a
            href={`#${s.anchorId}`}
            data-spy-link={s.anchorId}
            class="toc-link -ml-px block border-l border-transparent py-1 pl-4 text-small text-ink-muted transition-colors hover:text-ink"
          >
            {s.heading}
          </a>
        </li>
      ))
    }
  </ul>
</nav>

<style>
  .toc-link.is-active {
    color: var(--ink);
    border-color: var(--accent);
  }
</style>
