import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
export function BigStatView(props) {
  const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;
  // Dependent on props, not feasible to move out
  const style = {
    Container: {
      display: "flex",
      "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
      "align-items": `${alignment === "left"
        ? "flex-start"
        : alignment === "right"
          ? "flex-end"
          : "center"}`,
    },
    Stat: {
      "font-size": statFontSize
        ? `${statFontSize}px`
        : "var(--sl-font-size-xx-large)",
      "text-align": alignment,
      color: statTextColor || "var(--sqm-text)",
      lineHeight: "35px",
      fontWeight: statFontWeight || "var(--sl-font-weight-normal)",
    },
    Description: {
      "font-size": descriptionFontSize
        ? `${descriptionFontSize}px`
        : "var(--sl-font-size-small)",
      "font-weight": "var(--sl-font-weight-normal)",
      color: descriptionTextColor || "var(--sqm-text)",
      "text-align": alignment,
      lineHeight: "20px",
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  return (h("div", { part: "stat-wrapper", class: sheet.classes.Container },
    h("style", { type: "text/css" }, styleString),
    h("div", { part: "stat-value", class: sheet.classes.Stat }, statvalue),
    h("div", { part: "stat-description", class: sheet.classes.Description }, props.labelSlot)));
}
