import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { useBrickStyle } from "../hooks/use-brick-style.js";
import { a as I } from "../../../../sdk/dist/shared/chunk-WBZW5LVH.js";
import "../../../../sdk/dist/shared/chunk-3YVJ2ELD.js";
import "../../../../sdk/dist/shared/chunk-AFVJZPLS.js";
import "@sinclair/typebox";
import "../../../../sdk/dist/shared/chunk-A3GF4PYW.js";
import "../../../../sdk/dist/shared/chunk-W33JMRRN.js";
import { tx as D } from "../../../../style-system/dist/twind.js";
import BrickRoot from "../components/BrickRoot.js";
function Image({ brick, editable }) {
  const { props } = brick;
  const styles = useBrickStyle(brick);
  const { image: imageStyles, ...containerStyles } = styles;
  const { src, alt } = props.image ?? {};
  const isDynamicSrc = src?.includes("{{");
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    BrickRoot,
    {
      brick,
      editable,
      manifest: I,
      as: "picture",
      className: D("group/image flex items-center justify-center", Object.values(containerStyles)),
      children: [
        !isDynamicSrc && typeof src === "string" && src !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx(
          "img",
          {
            src,
            alt,
            className: D(
              "max-h-full w-full h-full rounded-[inherit] select-none pointer-events-none",
              imageStyles
            )
          }
        ),
        editable && !src && /* @__PURE__ */ jsxRuntimeExports.jsx(
          "div",
          {
            className: D(
              "rounded-[inherit] transition-opacity duration-300 group-hover/image:opacity-100 flex w-full h-full p-10 items-center justify-center font-semibold"
            ),
            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-ellipsis text-nowrap flex-nowrap text-center", children: "No image set" })
          }
        ),
        editable && isDynamicSrc && /* @__PURE__ */ jsxRuntimeExports.jsx(
          "div",
          {
            className: D(
              "rounded-[inherit] transition-opacity duration-300 flex items-center  w-full h-full justify-center font-medium p-10"
            ),
            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-ellipsis text-nowrap flex-nowrap text-center", children: "Dynamic Image" })
          }
        )
      ]
    }
  );
}
export {
  Image as default
};
//# sourceMappingURL=image.js.map
