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="border-b border-amber-900/50 bg-[#241812]">
      <div className="mx-auto flex max-w-5xl items-center justify-between gap-4 px-4 py-3">
        <Link href="/" className="text-xl font-bold tracking-wide text-amber-500">
          Nova WoW
        </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>
          {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>
  )
}