import { jsxs as f, jsx as t } from "react/jsx-runtime";
import { forwardRef as u } from "react";
import { b as p } from "./use-section-style.D7ZN4IXn.js";
import { _ as i } from "./twind.D7be0E5m.js";
const y = u(({ brick: r, editable: s }, l) => {
  const { props: n } = r, o = p(r), { image: a, ...m } = o, { src: e, alt: c } = n.image ?? {};
  return /* @__PURE__ */ f(
    "div",
    {
      className: i(
        "group/image flex items-center justify-center h-full w-full",
        s && "min-f-full min-w-full",
        Object.values(m)
      ),
      children: [
        e && /* @__PURE__ */ t(
          "img",
          {
            src: e,
            ref: l,
            alt: c,
            className: i(
              "max-h-full w-full h-full rounded-[inherit] select-none pointer-events-none",
              a
            )
          }
        ),
        s && /* @__PURE__ */ t(
          "div",
          {
            className: i(
              "rounded-[inherit] transition-opacity duration-300 group-hover/image:opacity-100 flex absolute inset-0 bg-black/30 items-center justify-center text-xl text-white font-semibold",
              e && "opacity-0"
            ),
            children: /* @__PURE__ */ t("div", { className: "text-ellipsis text-nowrap flex-nowrap text-center", children: "Drop an image here" })
          }
        )
      ]
    }
  );
});
export {
  y as default
};
//# sourceMappingURL=image.Dcqyzdlc.js.map
