"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import Image from "next/image";
import { cn } from "../../lib/utils/index.js";
const OptimizedImage = React.forwardRef(
  ({
    className,
    containerClassName,
    fallback,
    aspectRatio,
    enableBlur = false,
    blurDataURL,
    fill,
    alt,
    onError,
    ...props
  }, ref) => {
    const [hasError, setHasError] = React.useState(false);
    const [isLoading, setIsLoading] = React.useState(true);
    const handleError = React.useCallback(
      (e) => {
        setHasError(true);
        setIsLoading(false);
        onError == null ? void 0 : onError(e);
      },
      [onError]
    );
    const handleLoad = React.useCallback(() => {
      setIsLoading(false);
    }, []);
    const getAspectRatioClass = () => {
      switch (aspectRatio) {
        case "square":
          return "aspect-square";
        case "video":
          return "aspect-video";
        case "portrait":
          return "aspect-[3/4]";
        default:
          return "";
      }
    };
    if (hasError && fallback) {
      if (fill || aspectRatio) {
        return /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(
              "relative overflow-hidden",
              getAspectRatioClass(),
              containerClassName
            ),
            children: fallback
          }
        );
      }
      return /* @__PURE__ */ jsx(Fragment, { children: fallback });
    }
    const placeholderProps = {};
    if (enableBlur && blurDataURL) {
      placeholderProps.placeholder = "blur";
      placeholderProps.blurDataURL = blurDataURL;
    }
    if (fill || aspectRatio) {
      return /* @__PURE__ */ jsxs(
        "div",
        {
          className: cn(
            "relative overflow-hidden",
            getAspectRatioClass(),
            containerClassName
          ),
          children: [
            isLoading && !enableBlur && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-muted animate-pulse" }),
            /* @__PURE__ */ jsx(
              Image,
              {
                ref,
                className: cn(
                  "object-cover transition-opacity duration-300",
                  isLoading ? "opacity-0" : "opacity-100",
                  className
                ),
                fill: fill ?? !!aspectRatio,
                alt,
                onError: handleError,
                onLoad: handleLoad,
                ...placeholderProps,
                ...props
              }
            )
          ]
        }
      );
    }
    return /* @__PURE__ */ jsx(
      Image,
      {
        ref,
        className: cn(
          "transition-opacity duration-300",
          isLoading ? "opacity-0" : "opacity-100",
          className
        ),
        alt,
        onError: handleError,
        onLoad: handleLoad,
        ...placeholderProps,
        ...props
      }
    );
  }
);
OptimizedImage.displayName = "OptimizedImage";
export {
  OptimizedImage
};
