import { j as jsxRuntimeExports } from "./jsx-runtime.CXYVdt5g.js";
import { b4 as manifest } from "./use-editor.CurXdZnZ.js";
import "@sinclair/typebox";
import "lodash-es";
import { T as TextContent } from "./TextContent.V3HF5Ue-.js";
import { a as tx } from "./twind.B1qQmF_s.js";
import { b as useBrickStyle } from "./use-section-style.D8_SY6rK.js";
import { B as BrickRoot } from "./BrickRoot.C4Jpjw20.js";
import { u as useBrickProps } from "./use-brick-props.BKk39X7D.js";
import { useState } from "react";
function Card(props) {
  const { brick, editable } = props;
  const brickProps = useBrickProps(props);
  const styles = useBrickStyle(brick);
  const classes = Object.values(styles);
  const [showImage, setShowImage] = useState(true);
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    BrickRoot,
    {
      brick,
      editable,
      manifest,
      className: tx(
        "flex relative overflow-hidden !flex-nowrap",
        brickProps.imagePosition === "left" || brickProps.imagePosition === "right" ? "flex-row" : "flex-col",
        classes
      ),
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs(
          "div",
          {
            className: tx(
              "card-inner-wrapper",
              brickProps.imagePosition === "top" ? "order-2" : brickProps.imagePosition === "left" ? "order-last" : "order-1"
            ),
            children: [
              !brickProps.noTitle && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tx("text-[120%] font-semibold z-auto my-4 mx-4"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                TextContent,
                {
                  propPath: "title.content",
                  className: tx("flex-1"),
                  brickId: brick.id,
                  content: brickProps.title,
                  rawContent: brick.props.title,
                  editable,
                  inline: true
                }
              ) }),
              brickProps.imagePosition !== "middle" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tx("z-auto p-4", !brickProps.noTitle && "pt-0"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                TextContent,
                {
                  propPath: "text.content",
                  className: tx("flex-grow"),
                  brickId: brick.id,
                  content: brickProps.text,
                  rawContent: brick.props.text,
                  editable
                }
              ) })
            ]
          }
        ),
        brickProps.cardImage?.src && showImage && /* @__PURE__ */ jsxRuntimeExports.jsx(
          "img",
          {
            onError: () => setShowImage(false),
            className: tx(
              " select-none pointer-events-none bg-transparent",
              brickProps.cardImage.position ?? "object-center",
              brickProps.cardImage.fit ?? "object-cover",
              brickProps.imagePosition === "left" && "order-1",
              brickProps.imagePosition === "right" && "order-last",
              brickProps.imagePosition === "middle" && "order-2",
              brickProps.imagePosition === "top" && "order-first",
              brickProps.imagePosition === "bottom" && "order-last mt-auto",
              brickProps.imagePosition === "left" || brickProps.imagePosition === "right" ? "h-auto w-[clamp(100px,40%,400px)]" : "w-inherit h-[clamp(100px,50%,250px)]"
            ),
            src: brickProps.cardImage.src,
            alt: brickProps.cardImage.alt || "Card Image"
          }
        ),
        brickProps.text && brickProps.imagePosition === "middle" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tx("z-auto p-4 order-last"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
          TextContent,
          {
            propPath: "text.content",
            className: tx("flex-1 prose lg:prose-lg"),
            brickId: brick.id,
            content: brickProps.text,
            rawContent: brick.props.text,
            editable
          }
        ) })
      ]
    }
  );
}
export {
  Card as default
};
//# sourceMappingURL=card.JimPeoy4.js.map
