---
import type { Locale } from '@i18n/locales';
import { useDict, interpolate } from '@i18n/t';
import Base from '@layouts/Base.astro';
import { getProfile, getMeta } from '@lib/content';
import SectionLabel from '@components/ui/SectionLabel.astro';

interface Props {
  locale: Locale;
}
const { locale } = Astro.props;
const d = useDict(locale);
const profile = getProfile(locale);
const m = getMeta('cv', locale);

const cards = [
  { code: 'EN', label: d.cv.english, cv: profile.cv.en },
  { code: 'NO', label: d.cv.norsk, cv: profile.cv.no },
];
---

<Base locale={locale} pageId="cv" title={m.title} description={m.description}>
  <div class="mx-auto max-w-3xl px-6 py-16">
    <SectionLabel text="CV" />
    <h1 class="text-h1 mt-4">{d.cvPage.heading}</h1>
    <p class="text-body-lg text-ink-muted mt-4">{d.cvPage.intro}</p>

    <div class="mt-8 grid gap-4 sm:grid-cols-2">
      {
        cards.map((c) => (
          <div class="border-line bg-surface-1 flex flex-col rounded-md border p-6">
            <div class="flex items-center gap-3">
              <span class="bg-surface-2 text-mono-label text-accent rounded-sm px-2 py-1 font-mono">
                {c.code}
              </span>
              <span class="text-body text-ink font-semibold">{c.label}</span>
            </div>
            <p class="text-mono-meta text-ink-faint mt-2 font-mono">
              {interpolate(d.cv.fileMeta, { size: c.cv.sizeKb })} · {d.cvPage.updated}{' '}
              {c.cv.updated}
            </p>
            <a
              href={c.cv.path}
              download
              class="bg-accent text-body text-accent-ink mt-5 inline-flex items-center justify-center gap-2 rounded-sm px-4 py-2.5 font-semibold transition-[filter] duration-[--dur-quick] hover:brightness-105"
            >
              {d.cv.download}
            </a>
          </div>
        ))
      }
    </div>

    <p class="text-mono-meta text-ink-faint mt-6 font-mono">{d.cvPage.atsNote}</p>
  </div>
</Base>
