import { jsx, jsxs } from 'react/jsx-runtime';
import React__default from 'react';
import { emptyTheme } from './Empty.theme.js';
import { cn } from '../../../utils/cn.js';

const Empty = React__default.forwardRef(({ title, subtitle, image, imageAlt, icon, action, className, children, ...props }, ref) => {
    // Fixed image and icon dimensions
    const imageDimensions = "size-32";
    const iconDimensions = "size-16";
    // If children are provided, render them instead of the default layout
    if (children) {
        return (jsx("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: children }));
    }
    return (jsxs("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: [image ? (jsx("div", { className: "flex-shrink-0 mb-6", children: jsx("img", { src: image, alt: imageAlt || "Empty state illustration", className: cn("mx-auto object-cover", imageDimensions), loading: "lazy" }) })) : icon ? (jsx("div", { className: cn("flex-shrink-0 mx-auto text-[var(--color-text-muted)] mb-6", iconDimensions), "aria-hidden": "true", children: icon })) : null, jsxs("div", { className: "flex flex-col items-center justify-center gap-1", children: [title && jsx("div", { className: emptyTheme.titleStyle, children: title }), subtitle && (jsx("div", { className: emptyTheme.subtitleStyle, children: subtitle }))] }), action && (jsx("div", { className: "flex flex-col sm:flex-row gap-2 justify-center items-center mt-3", children: action }))] }));
});
// Set display name for dev tools and Storybook
Empty.displayName = "Empty";

export { Empty };
