import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
import { HostBlock } from "../../global/mixins";
import { CopyTextView } from "../views/copy-text-view";
export function CouponCodeView(props) {
  const error = !props.loading && props.error;
  const style = {
    HostBlock: HostBlock,
    couponCodeLabel: {
      margin: "var(--sl-spacing-x-small) 0",
      color: props.textColor || "var(--sqm-text-subdued)",
      fontSize: "var(--sl-font-size-small)",
    },
  };
  const vanillaStyle = `
  :host{
    display: block;   
    width: 100%;
  }
`;
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  return (h("div", null,
    h("style", { type: "text/css" },
      styleString,
      vanillaStyle),
    h("p", { class: sheet.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
    error ? (h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
      h("div", { part: "erroralert-text" }, props.errorText))) : (h(CopyTextView, Object.assign({}, props)))));
}
