NightSpire/web-next/components/Header.tsx

import { getTranslations } from 'next-intl/server'
import { Link } from '@/i18n/navigation'
import { getSession } from '@/lib/session'
import { LanguageSwitcher } from './LanguageSwitcher'
import { LogoutButton } from './LogoutButton'

export async function Header() {
  const t = await getTranslations('Nav')
  const session = await getSession()
  const loggedIn = Boolean(session.username)

  return (
    <header className="sticky top-0 z-50 border-b border-nw-border/60 bg-nw-bg/80 backdrop-blur supports-[backdrop-filter]:bg-nw-bg/60">
      <div className="mx-auto flex max-w-5xl items-center justify-between gap-4 px-4 py-3">
        <Link href="/" className="flex items-center gap-2">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/brand/logo.webp" alt="Nova WoW" className="h-9 w-auto" />
          <span className="nw-heading text-xl">Nova WoW</span>
        </Link>
        <nav className="flex items-center gap-4 text-sm">
          <Link href="/" className="text-amber-200 hover:text-amber-400">
            {t('home')}
          </Link>
          <Link href="/forum" className="text-amber-200 hover:text-amber-400">
            {t('forum')}
          </Link>
          <Link href="/vote-points" className="text-amber-200 hover:text-amber-400">
            {t('vote')}
          </Link>
          {loggedIn ? (
            <>
              <Link href="/account" className="text-amber-200 hover:text-amber-400">
                {t('account')}
              </Link>
              <LogoutButton />
            </>
          ) : (
            <>
              <Link href="/login" className="text-amber-200 hover:text-amber-400">
                {t('login')}
              </Link>
              <Link
                href="/register"
                className="rounded bg-amber-600 px-3 py-1 font-semibold text-[#1b120b] hover:bg-amber-500"
              >
                {t('register')}
              </Link>
            </>
          )}
          <LanguageSwitcher />
        </nav>
      </div>
    </header>
  )
}