// GateStatusBadge.jsx — gate state indicator sub-component
// Displays one of four hive-gate states using the design-system status pill classes.
//
// Props:
//   state  {string} — one of: "open" | "closed" | "transitioning" | "offline"
//   label  {string} — optional override label; defaults to the Russian display label
//   style  {object} — optional inline style passed through to the root <span>
//
// State → status class mapping:
//   open          → status--ok          (#26972B green)  gate is open and operating normally
//   closed        → status--muted       (#9AA5B3 grey)   gate is closed, nominal resting state
//   transitioning → status--warn        (#FFB300 yellow) gate motor is in motion (opening/closing)
//   offline       → status--critical    (#E5342B red)    gate device is unreachable / failure

const GATE_STATUS_MAP = {
  open:          { cls: "ok",       label: "Открыта"    },
  closed:        { cls: "muted",    label: "Закрыта"    },
  transitioning: { cls: "warn",     label: "В движении" },
  offline:       { cls: "critical", label: "Нет связи"  },
};

function GateStatusBadge({ state, label, style }) {
  const cfg = GATE_STATUS_MAP[state] || GATE_STATUS_MAP["offline"];
  const displayLabel = label !== undefined ? label : cfg.label;

  return (
    <span className={"status status--" + cfg.cls} style={style}>
      <span className="dot"></span>
      {displayLabel}
    </span>
  );
}

window.GateStatusBadge = GateStatusBadge;