"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import NextImage from "next/image";
import { cn } from "../../../utils/cn";
export const Image = ({ src, alt, width, height, fill = false, className, priority = false, sizes, unoptimized = false, quality = 85, loading, onLoad, onError, onClick, suppressHydrationWarning, testId, }) => {
    // SSR-safe: no window or client-only logic so server and client output match.
    const srcStr = typeof src === "string" ? src : "";
    const isExternal = srcStr.startsWith("http://") || srcStr.startsWith("https://");
    const shouldOptimize = !unoptimized && !isExternal;
    if (!srcStr) {
        return (_jsx("div", { className: cn("flex items-center justify-center bg-neutral-200 dark:bg-neutral-700 text-neutral-500 dark:text-neutral-400 text-sm min-h-[120px]", className), "data-testid": testId, children: "No image" }));
    }
    if (fill) {
        const fillSizes = sizes ?? "(max-width: 640px) 100vw, (max-width: 1024px) 90vw, 1200px";
        const forceContain = typeof className === "string" && className.includes("object-contain");
        return (_jsx(NextImage, { src: srcStr, alt: alt ?? "", fill: true, className: className, style: forceContain ? { objectFit: "contain" } : undefined, priority: priority, sizes: fillSizes, unoptimized: !shouldOptimize, quality: quality, loading: loading, onLoad: onLoad, onError: onError, onClick: onClick, suppressHydrationWarning: suppressHydrationWarning, "data-testid": testId }));
    }
    const nonFillSizes = sizes ?? "100vw";
    return (_jsx(NextImage, { src: srcStr, alt: alt ?? "", width: width || 400, height: height || 300, className: cn("object-cover", className), priority: priority, sizes: nonFillSizes, unoptimized: !shouldOptimize, quality: quality, loading: loading, onLoad: onLoad, onError: onError, onClick: onClick, suppressHydrationWarning: suppressHydrationWarning, "data-testid": testId }));
};
export default Image;
