import { jsxs as n, jsx as t } from "react/jsx-runtime";
import { forwardRef as f } from "react";
import { T as s } from "./TextContent.Bo6lqHFe.js";
import { _ as o, B as u } from "./twind.BLUk_ZzT.js";
import { b as h } from "./use-section-style.Cg6VYj5D.js";
import { u as x } from "./use-color-preset.DHRwRNwD.js";
const B = f(({ brick: a, editable: r }, l) => {
  var c, d;
  const e = structuredClone(a.props), m = h(a), p = x(a), g = Object.values(m);
  !e.cardTitle && !e.cardBody && (e.cardTitle = "Card Title", e.cardBody = "This is the body of the card. You can edit this content.");
  const i = e.cardImage && e.imagePosition === "overlay";
  return /* @__PURE__ */ n(
    "div",
    {
      className: o(
        "flex flex-1 relative overflow-hidden max-w-[100cqw] min-h-fit",
        e.imagePosition === "side" ? "flex-row" : "flex-col",
        p.container,
        g,
        i && u({
          backgroundImage: `url(${(c = e.cardImage) == null ? void 0 : c.src})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat"
        }),
        i && "justify-center"
      ),
      ref: l,
      children: [
        i && /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-[inherit] opacity-20 -z-1" }),
        /* @__PURE__ */ n("div", { className: o("card-inner-wrapper", e.imagePosition === "top" ? "order-2" : "order-1"), children: [
          e.cardTitle && !e.noTitle && /* @__PURE__ */ t("div", { className: o("text-[120%] font-semibold z-auto my-4 mx-4"), children: /* @__PURE__ */ t(
            s,
            {
              propPath: "cardTitle.content",
              className: o("flex-1"),
              brickId: a.id,
              content: e.cardTitle,
              editable: r,
              inline: !0
            }
          ) }),
          e.cardBody && e.imagePosition !== "middle" && /* @__PURE__ */ t("div", { className: o("z-auto p-4", !e.noTitle && "pt-0"), children: /* @__PURE__ */ t(
            s,
            {
              propPath: "cardBody.content",
              className: o("flex-1"),
              brickId: a.id,
              content: e.cardBody,
              editable: r
            }
          ) })
        ] }),
        ((d = e.cardImage) == null ? void 0 : d.src) && e.imagePosition !== "overlay" && /* @__PURE__ */ t(
          "img",
          {
            className: o(
              " select-none pointer-events-none bg-transparent",
              e.cardImage.position ?? "object-center",
              e.cardImage.fit ?? "object-cover",
              e.imagePosition === "middle" && "order-2",
              e.imagePosition === "top" && "order-first",
              e.imagePosition === "bottom" && "order-last mt-auto",
              e.imagePosition === "side" ? "h-auto w-[clamp(100px,40%,400px)]" : "w-inherit h-[clamp(200px,50%,300px)]"
            ),
            src: e.cardImage.src,
            alt: e.cardImage.alt || "Card Image"
          }
        ),
        e.cardBody && e.imagePosition === "middle" && /* @__PURE__ */ t("div", { className: o("z-auto p-4 order-last"), children: /* @__PURE__ */ t(
          s,
          {
            propPath: "cardBody.content",
            className: o("flex-1"),
            brickId: a.id,
            content: e.cardBody,
            editable: r
          }
        ) })
      ]
    }
  );
});
export {
  B as default
};
//# sourceMappingURL=card.C_9M4d2Z.js.map
