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