import { defineComponent as u, ref as a, useCssModule as m, openBlock as l, createElementBlock as c, normalizeClass as n, unref as d, createVNode as p, createCommentVNode as f, createElementVNode as _ } from "vue";
import h from "./Icon.js";
import { _ as v } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const C = {
  class: "stash-card-media",
  "data-test": "stash-card-media"
}, M = ["src", "alt"], z = /* @__PURE__ */ u({
  __name: "CardMedia",
  props: {
    src: {},
    alt: {}
  },
  setup(i) {
    const s = a(!0), o = a(!1), t = i, r = m();
    return (S, e) => (l(), c("div", C, [
      s.value || o.value ? (l(), c("div", {
        key: 0,
        class: n([d(r).placeholder, "flex w-full items-center justify-center rounded-t bg-ice-200"])
      }, [
        p(h, {
          name: "image",
          class: n(d(r).iconSize)
        }, null, 8, ["class"])
      ], 2)) : f("", !0),
      _("img", {
        src: t.src,
        class: "w-full rounded-t",
        alt: t.alt,
        onLoad: e[0] || (e[0] = () => s.value = !1),
        onError: e[1] || (e[1] = () => o.value = !0)
      }, null, 40, M)
    ]));
  }
}), g = "_placeholder_Dp2BD", x = "_iconSize_eZ7Mn", y = {
  placeholder: g,
  iconSize: x
}, E = {
  $style: y
}, V = /* @__PURE__ */ v(z, [["__cssModules", E]]);
export {
  V as default
};
//# sourceMappingURL=CardMedia.js.map
