import { ActionButton } from "./ActionButton";

type AppHeaderProps = {
  busy: boolean;
  enrolled: boolean;
  connected: boolean;
  syncing: boolean;
  onSync: () => void;
  onLogout: () => void;
  onToggleConnection: () => void;
};

export function AppHeader({
  busy,
  enrolled,
  connected,
  syncing,
  onSync,
  onLogout,
  onToggleConnection
}: AppHeaderProps) {
  return (
    <header className="app-header">
      <div className="brand-block">
        <div className="brand-icon-shell">
          <img className="brand-icon" src="/icon.png" alt="NexaVPN" />
        </div>
        <div className="brand-text">
          <p className="section-eyebrow">NexaVPN</p>
          <h1>Secure Access Client</h1>
          <p className="brand-subtitle">
            Enterprise-grade private network access with policy-based resources.
          </p>
        </div>
      </div>

      <div className="header-actions">
        <div className="header-actions-secondary">
          {enrolled ? (
            <>
              <ActionButton disabled={busy || syncing} onClick={onSync} variant="secondary">
                {syncing ? "Syncing..." : "Sync"}
              </ActionButton>
              <ActionButton disabled={busy || syncing} onClick={onLogout} variant="ghost">
                Logout
              </ActionButton>
            </>
          ) : null}
        </div>
        <div className="header-actions-primary">
          <ActionButton
            disabled={!enrolled || busy || syncing}
            onClick={onToggleConnection}
            variant={connected ? "danger" : "primary"}
          >
            {!enrolled ? "Provision first" : busy ? connected ? "Disconnecting..." : "Connecting..." : connected ? "Disconnect" : "Connect"}
          </ActionButton>
        </div>
      </div>
    </header>
  );
}
