import React from "react";

type AnyRecord = Record<string, any>;

const h = React.createElement;

export function TopStatusBar({ title, items, actions, className, testId }: AnyRecord) {
  const rows = Array.isArray(items) ? items : [];
  return h("section", { className: `top-status-bar ${className || ""}`, "data-testid": testId },
    h("div", { className: "top-status-main" },
      title ? h("strong", { className: "top-status-title" }, title) : null,
      h("div", { className: "top-status-chips" }, rows.map((item: any, index: number) => h("span", {
        key: item?.key || `${item?.label || "status"}-${index}`,
        className: `top-status-chip ${item?.tone || ""}`,
        "data-testid": item?.testId,
      },
        item?.label ? h("b", null, item.label) : null,
        h("span", null, item?.value ?? "--"),
      ))),
    ),
    actions ? h("div", { className: "top-status-actions" }, actions) : null,
  );
}
