---
import NavLink from '@components/NavLink.astro';
import { translations, type Lang } from '@data/i18n';
const { lang = 'no' } = Astro.props as { lang?: Lang };
const t = translations[lang].nav;
const { pathname } = Astro.url;

function getLangSwitchPath(path: string, lang: string) {
  if (lang === 'no') {
    if (path === '/') return '/en/';
    if (path.startsWith('/en/')) return path.replace('/en/', '/');
    return '/en' + path;
  } else {
    if (path === '/en/' || path === '/en') return '/';
    if (path.startsWith('/en/')) return path.replace('/en', '');
    return path;
  }
}

const langSwitchPath = getLangSwitchPath(pathname, lang);
---
<nav class="flex justify-center lg:justify-between items-center px-10 py-3 bg-accent mb-4 whitespace-nowrap">
    <h1 class="text-xl font-bold text-white hover:no-underline hidden lg:block">
        <a href={lang === 'en' ? '/en/' : '/'} class="hover:no-underline">{t.title}</a>
    </h1>
    <ul class="flex space-x-6 text-betongraa">
        <NavLink href={lang === 'en' ? '/en/' : '/'}>{t.home}</NavLink>
        <NavLink href={lang === 'en' ? '/en/program' : '/program'}>{t.program}</NavLink>
        <NavLink href="https://forms.gle/PvEh37nvRyicLFXn6" target="_blank">{t.volunteer}</NavLink>
        <NavLink href={lang === 'en' ? '/en/about' : '/about'}>{t.about}</NavLink>
        <NavLink href={langSwitchPath} noActive class="bg-gyllen-beige text-svart px-3 py-1 rounded hover:bg-slottsblaa font-bold">{t.langSwitch}</NavLink>
    </ul>
</nav>