---
import { localizedPath } from '../lib/i18n';
import type { Locale, Dict } from '../lib/i18n';
import LangSwitcher from './islands/LangSwitcher.astro';
import logo from '../assets/logo.svg';

interface Props {
  locale: Locale;
  dict: Dict;
  pagePath?: string;
  user?: App.Locals['user'];
}

const { locale, dict: t, pagePath = '/', user } = Astro.props;

const links = [
  { href: '/', label: t.nav.home },
  { href: '/events', label: t.nav.events },
  { href: '/about', label: t.nav.about },
  { href: '/map', label: t.nav.map },
  { href: '/contacts', label: t.nav.contacts },
];

const current = (path: string) =>
  path === '/' ? pagePath === '/' : pagePath.startsWith(path);
---

<header class="header">
  <div class="container header__inner">
    <a class="logo" href={localizedPath(locale, '/')}>
      <img class="logo__mark" src={logo.src} alt="Logo" fetchpriority="high" />
      <span>Devodytyji</span>
    </a>

    <nav class="nav" aria-label="main">
      {links.map((link) => (
        <a class="nav__link" href={localizedPath(locale, link.href)} aria-current={current(link.href) ? 'page' : undefined}>
          {link.label}
        </a>
      ))}

      <span class="nav__sep" aria-hidden="true"></span>

      {user ? (
        <>
          {user.isAdmin && (
            <a class="nav__link" href="/admin" aria-current={pagePath.startsWith('/admin') ? 'page' : undefined}>
              {t.nav.admin}
            </a>
          )}
          <form action="/api/auth/logout" method="post">
            <button class="btn btn--ghost btn--sm" type="submit">
              {t.nav.logout}
            </button>
          </form>
        </>
      ) : (
        <>
          <a class="nav__link" href={localizedPath(locale, '/login')}>
            {t.nav.login}
          </a>
          <a class="btn btn--primary btn--sm" href={localizedPath(locale, '/register')}>
            {t.nav.register}
          </a>
        </>
      )}

      <LangSwitcher locale={locale} pagePath={pagePath} labels={{ ua: 'UA', en: 'EN' }} />
    </nav>
  </div>
</header>