import { bq as defineComponent, ee as useImage, c_ as whenever, c as createElementBlock, d as openBlock, br as unref, e as createBaseVNode } from "./vendor-other-DdEHkzYa.js";
const _hoisted_1 = ["src", "alt"];
const _hoisted_2 = {
  key: 1,
  class: "flex size-full items-center justify-center bg-modal-card-placeholder-background"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "MediaImageTop",
  props: {
    asset: {}
  },
  emits: ["image-loaded", "view"],
  setup(__props, { emit: __emit }) {
    const emit = __emit;
    const { state, error, isReady } = useImage({
      src: __props.asset.src ?? "",
      alt: __props.asset.name
    });
    whenever(
      () => isReady.value && state.value?.naturalWidth && state.value?.naturalHeight,
      () => emit("image-loaded", state.value.naturalWidth, state.value.naturalHeight)
    );
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: "relative size-full overflow-hidden rounded bg-modal-card-placeholder-background",
        onDblclick: _cache[0] || (_cache[0] = ($event) => emit("view"))
      }, [
        !unref(error) ? (openBlock(), createElementBlock("img", {
          key: 0,
          src: _ctx.asset.src,
          alt: _ctx.asset.name,
          class: "size-full object-contain transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
        }, null, 8, _hoisted_1)) : (openBlock(), createElementBlock("div", _hoisted_2, _cache[1] || (_cache[1] = [
          createBaseVNode("i", { class: "pi pi-image text-3xl text-muted-foreground" }, null, -1)
        ])))
      ], 32);
    };
  }
});
export {
  _sfc_main as default
};
//# sourceMappingURL=MediaImageTop-BmT4ess7.js.map
