import { h } from "@stencil/core";
import { intl } from "../../global/global";
import { optimizeCloudinaryUrl } from "../../utils/imageUrl";
export function EmptyStateView(props) {
  const { emptyStateHeader, emptyStateImage, emptyStateText, supportText, missingFeature = "", } = props;
  return (h("sqm-portal-container", { padding: "large", gap: "medium", part: "sqm-base" },
    h("img", { style: { height: "100px", margin: "auto" }, src: optimizeCloudinaryUrl(emptyStateImage, { height: 200 }), decoding: "async" }),
    h("sqm-titled-section", { style: { maxHeight: "400px" }, "label-margin": "xxx-small", "text-align": "center" },
      h("sqm-text", { slot: "label" },
        h("p", { part: "header-text" }, emptyStateHeader)),
      h("sqm-text", { slot: "content" },
        h("p", { part: "description-text" }, intl.formatMessage({
          id: "emptyStateText",
          defaultMessage: emptyStateText,
        }, {
          supportText: (h("a", { target: "_blank", href: `mailto:saasquatch-support@impact.com?subject=Next steps for ${missingFeature} feature&body=Hi Support Team, %0D%0A
                  %0D%0A  
                  I am interested to learn more about the ${missingFeature} feature. Please let me know the next steps to access this feature, including any necessary plan upgrades.%0D%0A
                  %0D%0A 
                  - Feature Interested In: ${missingFeature}%0D%0A
                  - Company Name: [Please fill out your company name here]%0D%0A
                  %0D%0A
                  Thank you` }, supportText)),
        }))))));
}
