import { jsx as u } from "react/jsx-runtime";
import { memo as j, useState as i, useEffect as k, useMemo as m, useCallback as y } from "react";
import { cn as d } from "../../lib/utils.js";
import { getThumbhashDataURL as I, getResizedImageUrl as z } from "../../utils/image.js";
const O = j(function(b) {
  const {
    src: r,
    file: t,
    thumbhash: s,
    onLoad: c,
    className: f,
    style: h,
    aspectRatio: o = "auto",
    objectFit: g = "contain",
    ...L
  } = b, [p, U] = i(!1), [a, l] = i(null);
  k(() => {
    if (!t) {
      l(null);
      return;
    }
    const e = URL.createObjectURL(t);
    return l(e), () => {
      URL.revokeObjectURL(e);
    };
  }, [t]);
  const n = m(
    () => I(s ?? void 0),
    [s]
  ), R = y(
    (e) => {
      U(!0), c?.(e);
    },
    [c]
  ), v = m(() => a || z(r), [a, r]);
  return /* @__PURE__ */ u(
    "div",
    {
      className: d("relative w-full", f),
      style: {
        ...h,
        ...o !== "auto" && { aspectRatio: o },
        backgroundImage: n ? `url(${n})` : void 0,
        backgroundSize: "cover",
        backgroundPosition: "center"
      },
      children: /* @__PURE__ */ u(
        "img",
        {
          className: d(
            o === "auto" ? "opacity-0 w-full h-auto" : "absolute inset-0 opacity-0 size-full",
            `object-${g}`,
            p && "opacity-100"
          ),
          src: v,
          onLoad: R,
          ...L
        }
      )
    }
  );
});
export {
  O as Image
};
//# sourceMappingURL=image.js.map
