import Link from 'next/link';
import { getCurrentUser } from '@/lib/server/auth';
import { t } from '@/lib/i18n';
import { ThemeToggle } from './ThemeToggle';

export async function SiteHeader() {
  const user = await getCurrentUser();
  return (
    <header className="border-b" style={{ borderColor: 'var(--border)' }}>
      <div className="page flex h-16 items-center justify-between gap-4">
        <Link href="/" className="text-lg font-bold tracking-tight">
          {t('brand.name')}
        </Link>
        <nav className="hidden items-center gap-6 text-sm md:flex" aria-label="Main">
          <Link href="/" className="muted hover:opacity-80">
            {t('nav.home')}
          </Link>
          <Link href="/pricing" className="muted hover:opacity-80">
            {t('nav.pricing')}
          </Link>
          {user && (
            <Link href="/dashboard" className="muted hover:opacity-80">
              {t('nav.dashboard')}
            </Link>
          )}
          {user?.role === 'admin' && (
            <Link href="/admin" className="muted hover:opacity-80">
              {t('nav.admin')}
            </Link>
          )}
        </nav>
        <div className="flex items-center gap-2">
          <ThemeToggle />
          {user ? (
            <form action="/api/auth/logout" method="post">
              <button type="submit" className="btn-secondary">
                {t('nav.logout')}
              </button>
            </form>
          ) : (
            <Link href="/login" className="btn-primary">
              {t('nav.login')}
            </Link>
          )}
        </div>
      </div>
    </header>
  );
}