// DeptTopbar — department swap chip + theme.

function DeptTopbar({ crumbs, dept, onCycleDept, theme, onToggleTheme }) {
  return (
    <header className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <i className="ti ti-chevron-right"></i>}
            <span className={i === crumbs.length - 1 ? "here" : ""}>{c}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="topbar-spacer"></div>
      <div className="dept-chip" onClick={onCycleDept} title="Swap sample department">
        <span className="pdot" style={{background: dept.color}}></span>
        <span>{dept.label}</span>
        <i className="ti ti-arrows-exchange-2" style={{fontSize:12, color:"var(--on-surface-variant)"}}></i>
      </div>
      <div className="topbar-action" onClick={onToggleTheme}><i className={"ti " + (theme==="dark"?"ti-sun":"ti-moon")}></i></div>
      <div className="topbar-action has-new"><i className="ti ti-bell"></i></div>
      <div className="topbar-action"><span className="flag">🇺🇸</span></div>
      <div className="avatar">{dept.user.initial}</div>
    </header>
  );
}

window.DeptTopbar = DeptTopbar;