import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import isEmpty from "lodash/isEmpty.js";
import { AnimateBlock, BackgroundImage, Title } from "../../components/index.js";
import ItemWrap from "../../components/editor/ItemWrap/ItemWrap.js";
import { useTheme } from "../../context/theme/index.js";
import { Col, Grid, Row } from "../../grid/index.js";
import { block, getThemedValue } from "../../utils/index.js";
import './CardLayout.css';
const DEFAULT_SIZES = {
    all: 12,
    sm: 6,
    md: 4,
};
const b = block('card-layout-block');
const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, background, }) => {
    const theme = useTheme();
    const { border, ...backgroundImageProps } = getThemedValue(background || {}, theme);
    return (_jsx(AnimateBlock, { className: b(null, className), animate: animated, children: _jsxs(Grid, { children: [(title || description) && (_jsx(Title, { title: title, subtitle: description, className: titleClassName })), _jsxs("div", { className: b('content', {
                        'with-background': !isEmpty(background),
                    }), children: [_jsx(BackgroundImage, { className: b('image', { border }), ...backgroundImageProps }), _jsx(Row, { children: React.Children.map(children, (child, index) => (_jsx(Col, { sizes: colSizes, className: b('item'), children: _jsx(ItemWrap, { index: index, children: child }) }, index))) })] })] }) }));
};
export default CardLayout;
//# sourceMappingURL=CardLayout.js.map
