import { SkeletonGroup, SkeletonRectangle } from "@wix/design-system";
import React from "react";
const ImagePlaceholder = ({ node }) => {
  const containerRef = React.useRef(null);
  const containerWidth = containerRef.current?.offsetWidth;
  const imageAspectRatio = node.imageData?.image.width && node.imageData?.image?.height ? node.imageData.image.width / node.imageData.image.height : 16 / 9;
  const calculatedHeight = containerWidth ? containerWidth / imageAspectRatio : 200;
  return /* @__PURE__ */ React.createElement("div", { style: { position: "relative" }, ref: containerRef }, /* @__PURE__ */ React.createElement(SkeletonGroup, { skin: "light" }, /* @__PURE__ */ React.createElement(SkeletonRectangle, { width: "100%", height: calculatedHeight + "px" })));
};
const ImagePlaceholderMocked = () => {
  const node = {
    type: "image",
    imageData: {
      containerData: {
        width: {
          size: "CONTENT"
        },
        alignment: "CENTER",
        textWrap: true
      },
      image: {
        // src: {
        //   id: '16f8d7_db4dc593627d4111aac23c9afc3eb19c~mv2.png',
        // },
        width: 704,
        height: 433
      }
    }
  };
  return /* @__PURE__ */ React.createElement("div", { style: { margin: "20px auto", width: "826px" } }, /* @__PURE__ */ React.createElement(ImagePlaceholder, { node }));
};
export {
  ImagePlaceholder,
  ImagePlaceholderMocked
};
//# sourceMappingURL=image-placeholder.js.map
