const { Logo } = window.BecoDesignSystem_7188f3;

/** Always-on bar: the mark at the very top left, the account (your name) at the right. */
function StatusBar({ name, onOpenAccount, accountOpen }) {
  return (
    <div style={{
      position: "absolute", top: 0, left: 0, right: 0, height: 34, zIndex: 500,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "0 16px", pointerEvents: "none"
    }}>
      <span style={{ opacity: 0.9 }}><Logo on="dark" width={46} assetBase="../../assets" /></span>
      <button type="button" onClick={onOpenAccount} style={{
        pointerEvents: "auto", background: "none", border: "none", padding: 0, cursor: "pointer",
        display: "flex", alignItems: "center", gap: 6,
        fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 11, letterSpacing: "0.12em",
        textTransform: "uppercase", color: "var(--white)"
      }}>
        {name}
        <Icon d={P.chevronDown} size={12} stroke={2.5}
          style={{ transform: accountOpen ? "rotate(180deg)" : "none", transition: "transform var(--dur-base) var(--ease-out)" }} />
      </button>
    </div>
  );
}
Object.assign(window, { StatusBar });