import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
import { optimizeCloudinaryUrl } from "../../utils/imageUrl";
export function ProgramExplainerStepView(props) {
  const style = {
    Container: {
      display: "flex",
      flexDirection: "column",
      width: "100%",
      padding: "var(--sl-spacing-x-large)",
      lineHeight: "var(--sl-line-height-dense)",
      borderRadius: props.borderRadius
        ? `${props.borderRadius}px`
        : "var(--sqm-border-radius-normal)",
      color: props.textColor || "var(--sqm-text)",
      background: props.backgroundColor || "var(--sqm-accent-color-background)",
      "@media (max-width: 499px)": {
        flexDirection: "row",
        width: "auto",
        paddingBottom: "var(--sl-spacing-large)",
      },
    },
    Text: {
      "@media (max-width: 499px)": {
        marginLeft: "var(--sl-spacing-large)",
      },
    },
    Header: {
      color: props.textColor || "var(--sqm-text)",
      fontSize: "var(--sl-font-size-large)",
      fontWeight: "var(--sl-font-weight-bold)",
      marginTop: "var(--sl-spacing-x-large)",
      "@media (max-width: 499px)": {
        margin: "0",
      },
    },
    Description: {
      color: props.textColor || "var(--sqm-text)",
      fontSize: "var(--sl-font-size-medium)",
      marginTop: "var(--sl-spacing-small)",
      "@media (max-width: 499px)": {
        marginTop: "var(--sl-spacing-x-small)",
      },
    },
    Media: {
      width: "64px",
      height: "64px",
      borderRadius: "100%",
      objectFit: "cover",
      userSelect: "none",
      background: props.iconBackgroundColor || "var(--sl-color-white)",
      color: props.iconColor || "var(--sqm-accent-color-icon)",
      fontSize: "26px",
      textAlign: "center",
      lineHeight: "72px",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  const vanillaStyle = `
  :host{
    display: flex;
    width: 100%;
  }
  @media (max-width: 499px) {
    :host{
      display: block;
    }
  }`;
  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
    h("style", { type: "text/css" }, styleString),
    h("div", null, props.imageUrl ? (h("img", { class: sheet.classes.Media, src: optimizeCloudinaryUrl(props.imageUrl, {
        width: 128,
        height: 128,
      }), part: "sqm-media", decoding: "async" })) : (h("div", { class: sheet.classes.Media, part: "sqm-media" },
      h("sl-icon", { name: props.icon })))),
    h("div", { class: sheet.classes.Text },
      h("div", { class: sheet.classes.Header, part: "sqm-header" }, props.header),
      h("div", { class: sheet.classes.Description, part: "sqm-description" }, props.description))));
}
