import { Menu, Wifi, WifiOff, Loader2, FolderOpen } from 'lucide-react';

export function Header({ connected, sessionActive, currentProject, isProcessing, onToggleSidebar }) {
  return (
    <header className="bg-dark-900 border-b border-dark-800 px-4 py-3 flex items-center gap-4">
      <button
        onClick={onToggleSidebar}
        className="p-2 hover:bg-dark-800 rounded-lg transition-colors lg:hidden"
      >
        <Menu className="w-5 h-5" />
      </button>

      <div className="flex items-center gap-2">
        <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center">
          <span className="text-white font-bold text-sm">C</span>
        </div>
        <h1 className="font-semibold text-lg">Claude Web UI</h1>
      </div>

      <div className="flex-1" />

      {/* Project indicator */}
      {currentProject && (
        <div className="hidden md:flex items-center gap-2 text-dark-400 text-sm">
          <FolderOpen className="w-4 h-4" />
          <span className="font-mono">{currentProject}</span>
        </div>
      )}

      {/* Status indicators */}
      <div className="flex items-center gap-3">
        {isProcessing && (
          <div className="flex items-center gap-2 text-orange-400">
            <Loader2 className="w-4 h-4 animate-spin" />
            <span className="text-sm hidden sm:inline">Processing</span>
          </div>
        )}

        <div className={`flex items-center gap-2 ${sessionActive ? 'text-green-400' : 'text-dark-500'}`}>
          <div className={`w-2 h-2 rounded-full ${sessionActive ? 'bg-green-400' : 'bg-dark-600'}`} />
          <span className="text-sm hidden sm:inline">
            {sessionActive ? 'Session Active' : 'No Session'}
          </span>
        </div>

        <div className={`flex items-center gap-2 ${connected ? 'text-blue-400' : 'text-red-400'}`}>
          {connected ? (
            <Wifi className="w-4 h-4" />
          ) : (
            <WifiOff className="w-4 h-4" />
          )}
        </div>
      </div>
    </header>
  );
}
