---
/*
  CV split button (MICRO_INTERACTIONS): primary zone downloads the current-locale CV;
  the chevron is a native <details> disclosure listing both languages with file sizes
  — works with no JavaScript. nav.ts enhances it with outside-click / Esc close.
*/
import { useDict, interpolate } from '@i18n/t';
import type { Locale } from '@i18n/locales';
import { getProfile } from '@lib/content';

interface Props {
  locale: Locale;
  compact?: boolean;
}
const { locale, compact = false } = Astro.props;
const d = useDict(locale);
const p = getProfile(locale);
const current = p.cv[locale];
const other = locale === 'en' ? p.cv.no : p.cv.en;
const otherLabel = locale === 'en' ? d.cv.norsk : d.cv.english;
const currentLabel = locale === 'en' ? d.cv.english : d.cv.norsk;
---

<div class="cv-split relative inline-flex items-stretch">
  <a
    href={current.path}
    download
    class="bg-accent text-small text-accent-ink inline-flex items-center rounded-l-sm px-4 py-2 font-semibold transition-[filter] duration-[--dur-quick] hover:brightness-105"
  >
    {d.cv.download}
    {!compact && <span class="text-mono-label ml-2 font-mono opacity-70">EN/NO</span>}
  </a>
  <details class="cv-menu flex">
    <summary
      class="border-accent-ink/20 bg-accent text-accent-ink flex h-full cursor-pointer list-none items-center rounded-r-sm border-l px-2 transition-[filter] duration-[--dur-quick] hover:brightness-105"
      aria-label={d.cv.download}
    >
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
      </svg>
    </summary>
    <div
      class="border-line-strong bg-surface-2 absolute top-[calc(100%+8px)] right-0 z-30 w-64 overflow-hidden rounded-md border shadow-[var(--shadow-overlay)]"
    >
      <a
        href={current.path}
        download
        class="text-small text-ink hover:bg-surface-1 flex items-center justify-between gap-2 px-4 py-3"
      >
        <span
          ><span class="text-mono-label text-accent mr-2 font-mono">{d.lang[locale]}</span>{
            currentLabel
          }</span
        >
        <span class="mono-meta">{interpolate(d.cv.fileMeta, { size: current.sizeKb })}</span>
      </a>
      <a
        href={other.path}
        download
        class="border-line text-small text-ink-muted hover:bg-surface-1 hover:text-ink flex items-center justify-between gap-2 border-t px-4 py-3"
      >
        <span
          ><span class="text-mono-label mr-2 font-mono">{locale === 'en' ? 'NO' : 'EN'}</span>{
            otherLabel
          }</span
        >
        <span class="mono-meta">{interpolate(d.cv.fileMeta, { size: other.sizeKb })}</span>
      </a>
    </div>
  </details>
</div>