import { jsxs as f, jsx as t } from "react/jsx-runtime";
import { b as u } from "./use-section-style.CqWLdjop.js";
import { aO as p } from "./use-page-data.BYLN5MSa.js";
import { a as i } from "./twind.Cg2g8xBZ.js";
import { B as d } from "./BrickRoot.CQgjTuOI.js";
function w({ brick: s, editable: n }) {
  const { props: o } = s, a = u(s), { image: l, ...c } = a, { src: e, alt: m } = o.image ?? {}, r = e?.includes("{{");
  return /* @__PURE__ */ f(
    d,
    {
      brick: s,
      editable: n,
      manifest: p,
      as: "picture",
      className: i("group/image flex items-center justify-center", Object.values(c)),
      children: [
        !r && typeof e == "string" && e !== "" && /* @__PURE__ */ t(
          "img",
          {
            src: e,
            alt: m,
            className: i(
              "max-h-full w-full h-full rounded-[inherit] select-none pointer-events-none",
              l
            )
          }
        ),
        n && !e && /* @__PURE__ */ t(
          "div",
          {
            className: i(
              "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" })
          }
        ),
        n && r && /* @__PURE__ */ t(
          "div",
          {
            className: i(
              "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 {
  w as default
};
