function createButtons(root, configs) {
  // Always ensure configs is an array
  if (!Array.isArray(configs)) configs = [configs];
  root = document.getElementById(root);
  if (!root) throw new Error("No root found.");

  // Create a row container for all buttons
  const row = document.createElement("div");
  row.classList.add("kform-button-row");

  configs.forEach((cfg) => {
    if (!cfg.id) throw new Error("Each button requires a unique 'id'.");

    const container = document.createElement("div");
    container.classList.add("kform-button-container");

    if (cfg.label) {
      const label = document.createElement("label");
      label.classList.add("kform-button-label");
      label.textContent = cfg.label;
      container.appendChild(label);
    }

    const button = document.createElement("button");
    button.type = "button";
    button.id = cfg.id;
    button.classList.add("kform-custom-button");
    button.textContent = cfg.text || "Click Me";

    // styles
    button.style.width = cfg.width || "120px";
    button.style.height = cfg.height || "40px";
    button.style.fontSize = cfg.fontSize || "14px";
    button.style.backgroundColor = cfg.backgroundColor || "#007bff";
    button.style.color = cfg.color || "#fff";
    button.style.border = cfg.border || "1px #555 solid";
    button.style.borderRadius = cfg.borderRadius || "6px";

    // click handler
    debugger;
    button.addEventListener(
      "click",
      cfg.onclick || (() => alert("Button clicked!"))
    );

    container.appendChild(button);
    row.appendChild(container);
  });

  root.appendChild(row);
}
