import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef, useState, useCallback } from "react";
import { cn } from "../utils/cn.js";
const StImage = ({ width = 24, height = 24, color, style, ...otherProps }) => /* @__PURE__ */ jsxs("svg", { id: "icon_StImage", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width, height, style: {
  ...color && {
    "--stroke-color": color,
    "--stroke-fg-color": color
  },
  ...style
}, ...otherProps, children: [
  /* @__PURE__ */ jsx("path", { d: "M2 7C2 4.79086 3.79086 3 6 3H18C20.2091 3 22 4.79086 22 7V17C22 19.2091 20.2091 21 18 21H6C3.79086 21 2 19.2091 2 17V7Z", stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", vectorEffect: "non-scaling-stroke" }),
  /* @__PURE__ */ jsx("path", { d: "M2 16.5L4.58579 13.9142C5.36683 13.1332 6.63316 13.1332 7.41421 13.9142L8.93934 15.4393C9.52513 16.0251 10.4749 16.0251 11.0607 15.4393L15.2322 11.2678C16.2085 10.2915 17.7915 10.2915 18.7678 11.2678L22.0363 14.5363", stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", vectorEffect: "non-scaling-stroke" }),
  /* @__PURE__ */ jsx("circle", { cx: 9, cy: 8, r: 2, stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", vectorEffect: "non-scaling-stroke" })
] });
StImage.displayName = "StImage";
const DefaultPlaceholder = () => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center bg-muted text-muted-foreground w-full h-full", children: /* @__PURE__ */ jsx(StImage, { className: "h-[min(2rem,40%)] w-[min(2rem,40%)]" }) });
const DefaultFallback = () => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center bg-muted text-muted-foreground w-full h-full", children: /* @__PURE__ */ jsx(StImage, { className: "h-[min(2rem,40%)] w-[min(2rem,40%)] mx-auto " }) });
const DefaultLoadingContent = () => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center bg-muted animate-pulse w-full h-full", children: /* @__PURE__ */ jsx(StImage, { className: "h-[min(2rem,40%)] w-[min(2rem,40%)] text-muted-foreground animate-pulse" }) });
const Image = forwardRef(
  ({
    src,
    alt,
    fallback,
    placeholder,
    showLoading = false,
    loadingContent,
    onError,
    onLoad,
    className,
    containerClassName,
    style,
    fit = "cover",
    aspectRatio,
    ...props
  }, ref) => {
    const [imageState, setImageState] = useState(() => {
      if (!src) return "no-src";
      return showLoading ? "loading" : "loaded";
    });
    const handleLoad = useCallback(
      (event) => {
        setImageState("loaded");
        onLoad?.(event);
      },
      [onLoad]
    );
    const handleError = useCallback(
      (event) => {
        setImageState("error");
        onError?.(event);
      },
      [onError]
    );
    const containerStyle = {
      ...aspectRatio ? {
        aspectRatio: typeof aspectRatio === "number" ? `${aspectRatio}` : aspectRatio
      } : {},
      ...style
    };
    const showPlaceholder = imageState === "no-src";
    const showFallback = imageState === "error";
    const showSpinner = showLoading && imageState === "loading";
    const showImg = !!src && imageState !== "error";
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: cn(
          // single container, consistent sizing
          "relative block overflow-hidden",
          // if caller forgets to size it, give a better default that fills available space
          !containerClassName && !aspectRatio && "w-full h-full min-w-32 min-h-24",
          containerClassName
        ),
        style: containerStyle,
        role: !src || showFallback ? "img" : void 0,
        "aria-label": showPlaceholder ? alt || "Image placeholder" : showFallback ? alt ? `${alt} (failed to load)` : "Failed to load image" : void 0,
        children: [
          showSpinner && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-20", children: loadingContent || /* @__PURE__ */ jsx(DefaultLoadingContent, {}) }),
          showPlaceholder && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: placeholder || /* @__PURE__ */ jsx(DefaultPlaceholder, {}) }),
          showFallback && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: fallback || /* @__PURE__ */ jsx(DefaultFallback, {}) }),
          showImg && /* @__PURE__ */ jsx(
            "img",
            {
              ref,
              src,
              alt,
              onLoad: handleLoad,
              onError: handleError,
              className: cn(
                "absolute inset-0 w-full h-full",
                // make it fill the area in all cases
                fit === "cover" && "object-cover",
                fit === "contain" && "object-contain",
                fit === "fill" && "object-fill",
                fit === "none" && "object-none",
                fit === "scale-down" && "object-scale-down",
                // hide while loading if spinner shown
                showSpinner && "opacity-0",
                className
              ),
              ...props
            }
          )
        ]
      }
    );
  }
);
Image.displayName = "Image";
export {
  Image
};
