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 ChildrenItemWrap from "../../components/editor/ChildrenItemWrap/ChildrenItemWrap.js";
import ChildrensWrap from "../../components/editor/ChildrensWrap/ChildrensWrap.js";
import { useTheme } from "../../gravity-blocks/context/theme/index.js";
import { Col, Grid, GridJustifyContent, Row } from "../../gravity-blocks/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, centered = false, }) => {
    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(Row, { children: _jsx(Title, { title: title, subtitle: description, className: b('title', { centered }, titleClassName), colJustifyContent: centered ? GridJustifyContent.Center : GridJustifyContent.Start }) })), _jsxs("div", { className: b('content', {
                        'with-background': !isEmpty(background),
                    }), children: [_jsx(BackgroundImage, { className: b('image', { border }), ...backgroundImageProps }), _jsx(ChildrensWrap, { children: _jsx(Row, { children: React.Children.map(children, (child, index) => (_jsx(Col, { sizes: colSizes, className: b('item'), children: _jsx(ChildrenItemWrap, { className: b('item-wrap'), index: index, children: child }) }, index))) }) })] })] }) }));
};
export default CardLayout;
//# sourceMappingURL=CardLayout.js.map
