import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
export function PortalSectionView(props) {
  // Due to sole usage of props, not feasiable to move out of render function
  const style = {
    LabelContainer: {
      "margin-bottom": props.labelMargin === "none"
        ? props.labelMargin
        : `var(--sl-spacing-${props.labelMargin})`,
    },
    SectionContainer: {
      textAlign: props.textAlign || "left",
      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  return (h("div", { class: sheet.classes.SectionContainer, part: "sqm-base" },
    h("style", { type: "text/css" }, styleString),
    h("div", { class: sheet.classes.LabelContainer, part: "sqm-label" }, props.label),
    props.content));
}
