chatkit/frontend/src/components/Header.tsx

interface HeaderProps {
  isAuthenticated: boolean;
  teacherEmail: string;
}

export function Header({ isAuthenticated, teacherEmail }: HeaderProps) {
  return (
    <header className="fixed top-0 left-0 right-0 z-50 backdrop-blur-xl bg-[var(--glass-bg)] border-b border-[var(--glass-border)]">
      <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-accent)] flex items-center justify-center text-white font-bold text-lg shadow-lg">
            E
          </div>
          <div>
            <h1 className="font-display text-xl font-semibold text-[var(--color-text)]">
              ClassLens
            </h1>
            <p className="text-xs text-[var(--color-text-muted)] hidden sm:block">
              AI-Powered Exam Analysis
            </p>
          </div>
        </div>
        
        <nav className="flex items-center gap-6">
          {isAuthenticated && (
            <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-success)]/10 border border-[var(--color-success)]/20">
              <span className="w-2 h-2 rounded-full bg-[var(--color-success)] animate-pulse"></span>
              <span className="text-sm font-medium text-[var(--color-success)]">
                {teacherEmail}
              </span>
            </div>
          )}
          <a 
            href="https://platform.openai.com/docs/guides/chatkit" 
            target="_blank" 
            rel="noopener noreferrer"
            className="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-primary)] transition-colors"
          >
            Docs
          </a>
        </nav>
      </div>
    </header>
  );
}