import React, { useEffect } from 'react';
import { classes, st } from './EmptyState.st.css.js';
import Heading from '../Heading';
import Text from '../Text';
import deprecationLog from '../utils/deprecationLog';
export const defaultEmptyStateProps = {
    skin: 'section',
    image: null,
    children: null,
    align: 'center',
};
/**
 * Representing a state of an empty page, section, table, etc.
 */
const EmptyState = ({ theme, skin, image = defaultEmptyStateProps.image, children = defaultEmptyStateProps.children, align = defaultEmptyStateProps.align, title, subtitle, classNames: classNamesProp, className, dataHook, }) => {
    const mergedSkin = skin || theme || defaultEmptyStateProps.skin;
    useEffect(() => {
        if (theme) {
            deprecationLog('<EmptyState/> - prop "theme" is deprecated and will be removed in next major release, please use "skin" property instead.');
        }
    }, [theme]);
    return (React.createElement("div", { className: st(classes.root, { skin: mergedSkin, align }, className), "data-hook": dataHook, "data-skin": mergedSkin, "data-align": align },
        React.createElement("div", { className: classes.container },
            image && (React.createElement("div", { className: st(classes.imageContainer, {}, (classNamesProp && classNamesProp.imageContainer) || ''), "data-hook": "empty-state-image-container" }, typeof image === 'string' ? (React.createElement("img", { className: classes.imageElement, src: image, "data-hook": "image-element" })) : (React.cloneElement(image, {
                'data-hook': 'image-node',
            })))),
            title && (React.createElement("div", { className: classes.titleContainer, "data-hook": "empty-state-title-container" }, mergedSkin === 'section' ? (React.createElement(Text, { weight: "bold", className: classes.sectionTitle }, title)) : (React.createElement(Heading, { className: classes.title, size: "medium" }, title)))),
            subtitle && (React.createElement("div", { className: classes.subtitleContainer, "data-hook": "empty-state-subtitle-container" },
                React.createElement(Text, { className: classes.subtitle, size: "small", secondary: true }, subtitle))),
            children && (React.createElement("div", { className: classes.childrenContainer, "data-hook": "empty-state-children-container" }, children)))));
};
EmptyState.displayName = 'EmptyState';
export default EmptyState;
//# sourceMappingURL=EmptyState.js.map