// Header.jsx — sticky top bar with page title, notifications, chat toggle, user avatar.

function Header({ title, chatOpen, onChatToggle, onNotifToggle, notifCount }) {
  return (
    <header className="header">
      <span className="page-title">{title}</span>
      <span className="sep" />
      <span className="muted text-xs">jen@orbit.co · Member</span>
      <span className="spacer" />

      <button
        className="header-btn" onClick={onNotifToggle}
        aria-label="Notifications"
        title="Notifications"
      >
        <Icon name="bell" className="icon" />
        {notifCount > 0 && <span className="dot" />}
      </button>

      <button
        className="header-btn" onClick={onChatToggle}
        aria-label="Chat"
        title="Chat (⌘+K)"
        style={chatOpen ? { background: "var(--muted)" } : {}}
      >
        <Icon name="message" className="icon" />
      </button>

      <span className="sep" style={{ margin: "0 4px" }} />

      <div className="avatar">JS</div>
    </header>
  );
}

window.Header = Header;