"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { useTheme } from "next-themes";
import { Text } from "../../../components/atoms/Text";
import { Button } from "../../../components/atoms/Button";
import { Image } from "../../../components/atoms/Image";
import { cn } from "../../../utils/cn";
/**
 * EmptyState Molecule Component
 * Reusable empty state component for displaying "no results" or "no data" messages
 * Commonly used in lists, search results, and data tables
 */
export const EmptyState = ({ title, description, action, className, icon, image, showDefaultImage = true, testId, }) => {
    const { theme, resolvedTheme } = useTheme();
    const [mounted, setMounted] = React.useState(false);
    // Prevent hydration mismatch by only showing theme-dependent content after mount
    React.useEffect(() => {
        setMounted(true);
    }, []);
    // Determine what to display: icon > custom image > default image
    const shouldShowDefaultImage = showDefaultImage && !icon && !image;
    const shouldShowCustomImage = image && !icon;
    const shouldShowIcon = !!icon;
    // Determine if dark mode is active
    // Use resolvedTheme to handle "system" theme preference
    const isDarkMode = mounted && (resolvedTheme === "dark" || theme === "dark");
    return (_jsxs("div", { className: cn("py-20 text-center", className), "data-testid": testId, children: [shouldShowIcon && (_jsx("div", { className: "mb-4 flex justify-center", "data-testid": testId ? `${testId}.icon` : undefined, children: icon })), shouldShowCustomImage && (_jsx("div", { className: "mb-4 flex justify-center", "data-testid": testId ? `${testId}.image` : undefined, children: _jsx(Image, { src: image, alt: "Empty state", width: 350, height: 350, className: "mx-auto", testId: testId ? `${testId}.image` : undefined }) })), shouldShowDefaultImage && (_jsx("div", { className: "mb-4 flex justify-center", "data-testid": testId ? `${testId}.image` : undefined, children: mounted ? (_jsx(Image, { src: isDarkMode
                        ? "/images/empty-result-dark.png"
                        : "/images/empty-result.png", alt: "Empty result", width: 350, height: 350, className: "mx-auto", testId: testId ? `${testId}.image` : undefined })) : (
                // Fallback during SSR to prevent hydration mismatch
                _jsx(Image, { src: "/images/empty-result.png", alt: "Empty result", width: 350, height: 350, className: "mx-auto", testId: testId ? `${testId}.image` : undefined })) })), _jsx(Text, { variant: "body", className: "text-lg mb-4", testId: testId ? `${testId}.title` : undefined, children: title }), description && (_jsx(Text, { variant: "small", className: "text-neutral-500 dark:text-neutral-400 mb-4", testId: testId ? `${testId}.description` : undefined, children: description })), action && (_jsx(Button, { onClick: action.onClick, variant: action.variant || "primary", size: "md", className: "mt-4", testId: testId ? `${testId}.action` : undefined, children: action.label }))] }));
};
export default EmptyState;
