import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
import { optimizeCloudinaryUrl } from "../../utils/imageUrl";
export function ImageView(props) {
  // Dependent on props, not feasiable to move out
  const style = {
    Container: {
      display: "flex",
      width: "100%",
      justifyContent: props.alignment || "center",
      background: props.backgroundColor || "",
    },
    Image: {
      minHeight: props.minHeight || "100%",
      width: props.width || "100%",
      maxWidth: "max-content",
      objectFit: "cover",
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  const vanillaStyle = `
    :host{
      display: block;   
    }
  `;
  return (h("div", null,
    h("style", { type: "text/css" },
      styleString,
      vanillaStyle),
    h("div", { class: sheet.classes.Container, part: "sqm-base" },
      h("img", { part: "sqm-image", src: optimizeCloudinaryUrl(props.imageUrl), class: sheet.classes.Image, decoding: "async" }))));
}
