// Partner topbar — crumbs + partner-type swap + theme toggle.

function PartnerTopbar({ crumbs, partner, onCyclePartner, theme, onToggleTheme }) {
  const toneByType = { fulfillment: "#16A34A", logistics: "#1E3A8A", distributor: "#AC0022" };
  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="partner-chip" onClick={onCyclePartner} title="Swap sample partner">
        <span className="pdot" style={{background: toneByType[partner.type]}}></span>
        <span>{partner.typeLabel}</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">{partner.flag}</span></div>
      <div className="avatar">{partner.initial}</div>
    </header>
  );
}

window.PartnerTopbar = PartnerTopbar;