---
import { translations } from '../data/i18n.js';
const { lang = 'no' } = Astro.props;
const t = translations[lang].nav;
const { pathname } = Astro.url;

function getLangSwitchPath(path, lang) {
  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-between items-center px-10 py-4 bg-accent mb-4">
    <h1 class="text-xl font-bold text-white">
        <a href={lang === 'en' ? '/en/' : '/'}>{t.title}</a>
    </h1>
    <ul class="flex space-x-4 text-white">
        <li><a href={lang === 'en' ? '/en/' : '/'}>{t.home}</a></li>
        <li><a href={lang === 'en' ? '/en/program' : '/program'}>{t.program}</a></li>
        <li><a href="https://forms.gle/PvEh37nvRyicLFXn6" target="_blank">{t.volunteer}</a></li>
        <li><a href={lang === 'en' ? '/en/about' : '/about'}>{t.about}</a></li>
        <li>
            <a href={langSwitchPath} class="ml-4 bg-blue-500 text-white px-3 py-1 rounded">
                {t.langSwitch}
            </a>
        </li>
    </ul>
</nav>

<style>
  nav a {
    padding: 0.5em 0.5em;
    color: var(--text);
    border-bottom: 4px solid transparent;
    text-decoration: none;
  }
  nav a.active {
    text-decoration: none;
    border-bottom-color: var(--accent);
  }
</style>
