---
/*
  Language switch (MICRO_INTERACTIONS): a two-segment control that maps the current
  page to its twin in the other locale via the slug map. Implemented as two links,
  so it works with no JavaScript; the active segment is styled as the thumb.
*/
import { useDict } from '@i18n/t';
import type { Locale } from '@i18n/locales';
import { pathFor, type PageId } from '@i18n/slugMap';
import { LOCALE_LABEL } from '@i18n/locales';

interface Props {
  locale: Locale;
  pageId: PageId;
  class?: string;
}
const { locale, pageId, class: cls } = Astro.props;
const d = useDict(locale);

const segments: { code: Locale; href: string; label: string }[] = [
  { code: 'en', href: pathFor(pageId, 'en'), label: LOCALE_LABEL.en },
  { code: 'no', href: pathFor(pageId, 'no'), label: LOCALE_LABEL.no },
];
---

<div
  class:list={['border-line bg-surface-1 inline-flex rounded-full border p-[3px]', cls]}
  role="group"
  aria-label={d.lang.switchTo}
>
  {
    segments.map((s) =>
      s.code === locale ? (
        <span
          class="border-line-strong bg-surface-2 text-mono-label text-ink rounded-full border px-3 py-1 font-mono"
          aria-current="true"
        >
          {s.label}
        </span>
      ) : (
        <a
          href={s.href}
          class="text-mono-label text-ink-muted hover:text-ink rounded-full px-3 py-1 font-mono transition-colors duration-[--dur-quick]"
          aria-label={d.lang.switchTo}
        >
          {s.label}
        </a>
      ),
    )
  }
</div>
