import { Activity, Settings, UserPlus, LogOut, User, LogIn } from 'lucide-react';
import { cn } from '../lib/utils';

interface HeaderProps {
  className?: string;
  onOpenAdminPanel?: () => void;
  onOpenRegistration?: () => void;
  onOpenLogin?: () => void;
  onLogout?: () => void;
  isLoggedIn?: boolean;
  isAdmin?: boolean;
  userEmail?: string;
}

export const Header = ({ 
  className, 
  onOpenAdminPanel, 
  onOpenRegistration, 
  onOpenLogin,
  onLogout,
  isLoggedIn,
  isAdmin,
  userEmail
}: HeaderProps) => {
  return (
    <header className={cn('border-b border-border bg-card/50 backdrop-blur-sm', className)}>
      <div className="container mx-auto px-4 py-3 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
            <Activity className="w-6 h-6 text-white" />
          </div>
          <div>
            <h1 className="text-xl font-bold text-foreground">TradeWithLive</h1>
            <p className="text-xs text-muted-foreground">Influencer P&L Tracker</p>
          </div>
        </div>
        
        <div className="flex items-center gap-2">
          <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-green-500/10 border border-green-500/20">
            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
            <span className="text-sm font-medium text-green-500">Live Feed</span>
          </div>
          
          {onOpenRegistration && (
            <button
              onClick={onOpenRegistration}
              className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium hover:from-blue-600 hover:to-purple-700 transition-all text-sm"
              title="Register as Influencer"
            >
              <UserPlus className="w-4 h-4" />
              <span className="hidden sm:inline">Register</span>
            </button>
          )}
          
          {isLoggedIn ? (
            <>
              {isAdmin && onOpenAdminPanel && (
                <button
                  onClick={onOpenAdminPanel}
                  className="p-2 rounded-lg hover:bg-accent/50 transition-colors"
                  title="Admin Panel"
                >
                  <Settings className="w-5 h-5 text-muted-foreground" />
                </button>
              )}
              
              <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-accent/50">
                <User className="w-4 h-4 text-muted-foreground" />
                <span className="text-sm text-foreground hidden sm:inline">{userEmail}</span>
              </div>
              
              {onLogout && (
                <button
                  onClick={onLogout}
                  className="p-2 rounded-lg hover:bg-red-500/10 text-red-500 transition-colors"
                  title="Logout"
                >
                  <LogOut className="w-5 h-5" />
                </button>
              )}
            </>
          ) : (
            onOpenLogin && (
              <button
                onClick={onOpenLogin}
                className="flex items-center gap-2 px-4 py-2 rounded-lg border border-border text-foreground hover:bg-accent/50 transition-colors text-sm"
                title="Login"
              >
                <LogIn className="w-4 h-4" />
                <span className="hidden sm:inline">Login</span>
              </button>
            )
          )}
        </div>
      </div>
    </header>
  );
};