function createConsumptionHeaderView({ createCloseIcon, formatOracleResponseDate, environment }) {
  const { document } = environment;
  function createHeader({ titleId, customerLabel, closeLabel, onClose, titleText = "Cloud Consumption" }) {
    const header = document.createElement("header");
    header.className = "opportunities-extension-account-plans-header";
    const heading = document.createElement("div");
    const title = document.createElement("h2");
    title.id = titleId;
    title.textContent = titleText;
    const subtitle = document.createElement("p");
    subtitle.textContent = customerLabel;
    heading.append(title, subtitle);
    const closeButton = document.createElement("button");
    closeButton.type = "button";
    closeButton.className = "opportunities-extension-icon-button";
    closeButton.setAttribute("aria-label", closeLabel);
    closeButton.title = "Close";
    closeButton.append(createCloseIcon());
    closeButton.addEventListener("click", onClose);
    header.append(heading, closeButton);
    return header;
  }
  function createDetails(plan, { contractAction = null } = {}) {
    const details = document.createElement("dl");
    details.className = "opportunities-extension-account-plan-details";
    const fields = [
      { label: "Booking Customer", value: plan.bookingCustomer },
      { label: "Sold To Party Name", value: plan.soldToPartyName },
      { label: "Contract ID", value: plan.contractId },
      { label: "Header Status", value: plan.hdrStatusCode },
      { label: "Start Date", value: formatOracleResponseDate(plan.startDate) },
      { label: "End Date", value: formatOracleResponseDate(plan.endDate) }
    ];
    fields.forEach(field => {
      const group = document.createElement("div");
      const term = document.createElement("dt");
      const description = document.createElement("dd");
      term.textContent = field.label;
      description.textContent = field.value === null || field.value === undefined || field.value === "" ? "-" : String(field.value);
      if (field.label === "Contract ID" && contractAction) {
        group.className = "opportunities-extension-contract-row";
        const value = document.createElement("span");
        value.textContent = description.textContent;
        description.textContent = "";
        description.className = "opportunities-extension-contract-ratecard";
        description.append(value, contractAction);
      }
      group.append(term, description);
      details.append(group);
    });
    return details;
  }
  return { createHeader, createDetails };
}