import { jsxs, jsx } from "react/jsx-runtime";
import { b as useBrickStyle } from "./use-section-style.DjjgfIQS.js";
import { aR as manifest } from "./use-page-data.CMUQyNAA.js";
import "@sinclair/typebox";
import { a as tx } from "./twind.DdSZmZu6.js";
import { B as BrickRoot } from "./BrickRoot.D_a_fRJm.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__ */ jsxs(
    BrickRoot,
    {
      brick,
      editable,
      manifest,
      as: "picture",
      className: tx("group/image flex items-center justify-center", Object.values(containerStyles)),
      children: [
        !isDynamicSrc && typeof src === "string" && src !== "" && /* @__PURE__ */ jsx(
          "img",
          {
            src,
            alt,
            className: tx(
              "max-h-full w-full h-full rounded-[inherit] select-none pointer-events-none",
              imageStyles
            )
          }
        ),
        editable && !src && /* @__PURE__ */ jsx(
          "div",
          {
            className: tx(
              "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__ */ jsx("div", { className: "text-ellipsis text-nowrap flex-nowrap text-center", children: "No image set" })
          }
        ),
        editable && isDynamicSrc && /* @__PURE__ */ jsx(
          "div",
          {
            className: tx(
              "rounded-[inherit] transition-opacity duration-300 flex items-center  w-full h-full justify-center font-medium p-10"
            ),
            children: /* @__PURE__ */ jsx("div", { className: "text-ellipsis text-nowrap flex-nowrap text-center", children: "Dynamic Image" })
          }
        )
      ]
    }
  );
}
export {
  Image as default
};
//# sourceMappingURL=image.u5hXnwE8.js.map
