import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
export function ProgramExplainerView(props, children) {
  const style = {
    Container: {
      color: props.textColor || "var(--sqm-text)",
      background: props.backgroundColor || "",
    },
    Header: {
      fontSize: "var(--sl-font-size-x-large)",
      fontWeight: "var(--sl-font-weight-bold)",
      lineHeight: "var(--sl-line-height-dense)",
      marginBottom: "var(--sl-spacing-large)",
      textAlign: "center",
    },
    Grid: {
      display: "flex",
      flexDirection: "row",
      gap: "var(--sl-spacing-large)",
      "@media (max-width: 499px)": {
        flexDirection: "column",
      },
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  const vanillaStyle = `
  ::slotted(*){
    display: flex;
    width: 100%;
  }
  @media (max-width: 499px) {
    ::slotted(*){
      display: block;
    }
  }`;
  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
    h("style", { type: "text/css" },
      styleString,
      vanillaStyle),
    h("div", { class: sheet.classes.Header },
      h("div", { class: sheet.classes.Header, part: "sqm-header" }, props.header)),
    h("div", { class: sheet.classes.Grid, part: "sqm-grid-container" }, children)));
}
