import { jsxs as d, jsx as a } from "react/jsx-runtime";
import { forwardRef as f } from "react";
import { T as s } from "./TextContent.DyuXj5Ki.js";
import { _ as o, B as u } from "./twind.D7be0E5m.js";
import { b as x } from "./use-section-style.BAfgyRSq.js";
import { u as v } from "./use-color-preset.5T8Y9Is8.js";
const w = f(({ brick: t, editable: r }, m) => {
  var n, c;
  const e = t.props, l = x(t), p = v(t), g = Object.values(l), i = e.cardImage && e.imagePosition === "overlay";
  return /* @__PURE__ */ d(
    "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(${(n = e.cardImage) == null ? void 0 : n.src})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat"
        }),
        i && "justify-center"
      ),
      ref: m,
      children: [
        i && /* @__PURE__ */ a("div", { className: "absolute inset-0 bg-[inherit] opacity-20 -z-1" }),
        /* @__PURE__ */ d("div", { className: o("card-inner-wrapper", e.imagePosition === "top" ? "order-2" : "order-1"), children: [
          !e.noTitle && /* @__PURE__ */ a("div", { className: o("text-[120%] font-semibold z-auto my-4 mx-4"), children: /* @__PURE__ */ a(
            s,
            {
              propPath: "cardTitle.content",
              className: o("flex-1"),
              brickId: t.id,
              content: e.cardTitle,
              editable: r,
              inline: !0
            }
          ) }),
          e.imagePosition !== "middle" && /* @__PURE__ */ a("div", { className: o("z-auto p-4", !e.noTitle && "pt-0"), children: /* @__PURE__ */ a(
            s,
            {
              propPath: "cardBody.content",
              className: o("flex-grow"),
              brickId: t.id,
              content: e.cardBody,
              editable: r
            }
          ) })
        ] }),
        ((c = e.cardImage) == null ? void 0 : c.src) && e.imagePosition !== "overlay" && /* @__PURE__ */ a(
          "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__ */ a("div", { className: o("z-auto p-4 order-last"), children: /* @__PURE__ */ a(
          s,
          {
            propPath: "cardBody.content",
            className: o("flex-1"),
            brickId: t.id,
            content: e.cardBody,
            editable: r
          }
        ) })
      ]
    }
  );
});
export {
  w as default
};
//# sourceMappingURL=card.VaK7-H_t.js.map
