web/src/components/Header.tsx

import React from 'react';
import { Menu, User, BookOpen, Moon, Sun } from 'lucide-react';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import type { User as UserType } from '../App';

interface HeaderProps {
  user: UserType | null;
  onMenuClick: () => void;
  onUserClick: () => void;
  isDarkMode: boolean;
  onToggleDarkMode: () => void;
}

export function Header({ user, onMenuClick, onUserClick, isDarkMode, onToggleDarkMode }: HeaderProps) {
  return (
    <header className="h-16 border-b border-border bg-card px-4 lg:px-6 flex items-center justify-between sticky top-0 z-[60]">
      <div className="flex items-center gap-4">
        <Button
          variant="ghost"
          size="icon"
          className="lg:hidden"
          onClick={onMenuClick}
        >
          <Menu className="h-5 w-5" />
        </Button>
        
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
            <BookOpen className="h-6 w-6 text-white" />
          </div>
          <div>
            <h1 className="text-lg sm:text-xl tracking-tight">
              Clare <span className="text-sm font-bold text-muted-foreground hidden sm:inline ml-2">Your Personalized AI Tutor</span>
            </h1>
            <p className="text-xs text-muted-foreground hidden sm:block">
              Personalized guidance, review, and intelligent reinforcement
            </p>
          </div>
        </div>
      </div>

      <div className="flex items-center gap-2">
        <Badge variant="secondary" className="hidden md:flex">
          Module 10 – Responsible AI
        </Badge>
        
        <Button
          variant="ghost"
          size="icon"
          onClick={onToggleDarkMode}
          aria-label="Toggle dark mode"
        >
          {isDarkMode ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
        </Button>
        
        {user ? (
          <Button
            variant="outline"
            className="gap-2"
            onClick={onUserClick}
          >
            <User className="h-4 w-4" />
            <span className="hidden sm:inline">{user.name}</span>
          </Button>
        ) : (
          <Button
            variant="default"
            className="gap-2 lg:hidden"
            onClick={onUserClick}
          >
            <User className="h-4 w-4" />
            <span>Login</span>
          </Button>
        )}
      </div>
    </header>
  );
}