/**
 * @param {string} labelContent
 * @param {string} tooltipText
 * @returns {HTMLElement}
 */
export function makeHelpWrap(labelContent, tooltipText) {
  const wrap = document.createElement("div");
  wrap.className = "help-wrap";
  const label = document.createElement("span");
  label.textContent = labelContent;
  const icon = document.createElement("span");
  icon.className = "help-icon";
  icon.setAttribute("aria-label", "Aide");
  icon.textContent = "?";
  const bubble = document.createElement("div");
  bubble.className = "tooltip-bubble";
  bubble.textContent = tooltipText;
  wrap.append(label, icon, bubble);
  return wrap;
}

/**
 * @param {HTMLElement} parent
 * @param {string} titleText
 * @param {string} helpText
 * @returns {void}
 */
export function addSectionTitle(parent, titleText, helpText) {
  const section = document.createElement("div");
  section.className = "section-with-help";
  const h2 = document.createElement("h2");
  h2.textContent = titleText;
  section.appendChild(h2);
  section.appendChild(makeHelpWrap("", helpText));
  parent.appendChild(section);
}