import { jsxs as f, jsx as t } from "react/jsx-runtime";
import { b as p } from "./use-section-style.CgktT_qE.js";
import { Q as u } from "./chunk-RXIM6GTA.C-ABNABt.js";
import "@sinclair/typebox";
import { _ as n } from "./twind.D_WBdNpx.js";
import { B as d } from "./BrickRoot.LoA8SzjD.js";
function N({ brick: s, editable: i }) {
  const { props: r } = s, o = p(s), { image: a, ...l } = o, { src: e, alt: c } = r.image ?? {}, m = e == null ? void 0 : e.includes("{{");
  return /* @__PURE__ */ f(
    d,
    {
      editable: i,
      manifest: u,
      as: "picture",
      className: n("group/image flex items-center justify-center", Object.values(l)),
      children: [
        !i && typeof e == "string" && e !== "" && /* @__PURE__ */ t(
          "img",
          {
            src: e,
            alt: c,
            className: n(
              "max-h-full w-full h-full rounded-[inherit] select-none pointer-events-none",
              a
            )
          }
        ),
        i && !e && /* @__PURE__ */ t(
          "div",
          {
            className: n(
              "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__ */ t("div", { className: "text-ellipsis text-nowrap flex-nowrap text-center", children: "No image set" })
          }
        ),
        i && m && /* @__PURE__ */ t(
          "div",
          {
            className: n(
              "rounded-[inherit] transition-opacity duration-300 flex items-center  w-full h-full justify-center font-medium p-10"
            ),
            children: /* @__PURE__ */ t("div", { className: "text-ellipsis text-nowrap flex-nowrap text-center", children: "Dynamic Image" })
          }
        )
      ]
    }
  );
}
export {
  N as default
};
//# sourceMappingURL=image.__nsAOAR.js.map
