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

export async function SiteHeader() {
  const user = await getCurrentUser();
  return (
    <header
      className="sticky top-0 z-40 border-b backdrop-blur-xl"
      style={{
        borderColor: 'color-mix(in srgb, var(--border) 85%, transparent)',
        background: 'color-mix(in srgb, var(--surface) 78%, transparent)',
      }}
    >
      <div className="page flex h-16 items-center justify-between gap-4">
        <Link href="/" className="flex items-center gap-2">
          <span className="font-display text-2xl leading-none tracking-tight">{t('brand.name')}</span>
          <span className="kicker hidden sm:inline" aria-hidden>
            Store
          </span>
        </Link>
        <nav className="hidden items-center gap-7 text-sm md:flex" aria-label="Main">
          <Link href="/shop" className="transition-colors hover:text-[var(--text)]" style={{ color: 'var(--text-muted)' }}>
            Shop
          </Link>
          {user && (
            <Link href="/orders" className="transition-colors hover:text-[var(--text)]" style={{ color: 'var(--text-muted)' }}>
              Orders
            </Link>
          )}
          {user?.role === 'admin' && (
            <Link href="/admin" className="transition-colors hover:text-[var(--text)]" style={{ color: 'var(--text-muted)' }}>
              {t('nav.admin')}
            </Link>
          )}
        </nav>
        <div className="flex items-center gap-2">
          <ThemeToggle />
          <CartLink />
          {user ? (
            <Link href="/dashboard" className="btn-secondary">
              {t('nav.dashboard')}
            </Link>
          ) : (
            <Link href="/login" className="btn-primary">
              {t('nav.login')}
            </Link>
          )}
        </div>
      </div>
    </header>
  );
}