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