export default function Topbar({ serverStatus, onRefresh }) {
  const statusText =
    serverStatus === 'online'   ? 'Server online'  :
    serverStatus === 'checking' ? 'Checking…'       :
    serverStatus === 'error'    ? 'Server error'    : 'Server offline';

  return (
    <header className="topbar">
      <div className="topbar-logo">
        ⚡ Adaptive<em>Auth</em>
      </div>
      <div className="topbar-status">
        <span className={`status-dot ${serverStatus}`}></span>
        <span>{statusText}</span>
        <button className="btn btn-ghost btn-sm" onClick={onRefresh} style={{ marginLeft: 4 }}>
          Refresh
        </button>
      </div>
    </header>
  );
}