"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock.js"));
const BalancedMasonry_1 = tslib_1.__importDefault(require("../../components/BalancedMasonry/BalancedMasonry.js"));
const FullWidthBackground_1 = tslib_1.__importDefault(require("../../components/FullWidthBackground/FullWidthBackground.js"));
const Media_1 = tslib_1.__importDefault(require("../../components/Media/Media.js"));
const Title_1 = tslib_1.__importDefault(require("../../components/Title/Title.js"));
const YFMWrapper_1 = tslib_1.__importDefault(require("../../components/YFMWrapper/YFMWrapper.js"));
const constants_1 = require("../../constants.js");
const theme_1 = require("../../gravity-blocks/context/theme/index.js");
const grid_1 = require("../../gravity-blocks/grid/index.js");
const utils_1 = require("../../utils/index.js");
const microdata_1 = require("../../utils/microdata.js");
const b = (0, utils_1.block)('PromoFeaturesBlock');
const breakpointColumns = {
    [constants_1.BREAKPOINTS.lg]: 3,
    [constants_1.BREAKPOINTS.md]: 2,
    [constants_1.BREAKPOINTS.sm]: 1,
};
const PromoFeaturesBlock = (props) => {
    const { items, title, description, theme, animated = true } = props;
    const backgroundTheme = theme || 'default';
    const globalTheme = (0, theme_1.useTheme)();
    return ((0, jsx_runtime_1.jsx)(grid_1.Grid, { children: (0, jsx_runtime_1.jsxs)(AnimateBlock_1.default, { className: b({ [backgroundTheme]: true }), animate: animated, children: [(0, jsx_runtime_1.jsx)(FullWidthBackground_1.default, { className: b('background', { [backgroundTheme]: true }) }), (0, jsx_runtime_1.jsx)(Title_1.default, { title: title, subtitle: description, className: b('header') }), (0, jsx_runtime_1.jsx)(BalancedMasonry_1.default, { breakpointCols: breakpointColumns, className: b('card-container'), columnClassName: b('card-container-column'), children: items &&
                        items.map(({ title: cardTitle, text, media, theme: cardTheme }, index) => {
                            const blockModifier = backgroundTheme === 'default' ? 'default' : 'light';
                            const themeMod = cardTheme || blockModifier || '';
                            const themedMedia = (0, utils_1.getThemedValue)(media, globalTheme);
                            const allProps = (0, microdata_1.mergeVideoMicrodata)(themedMedia, {
                                name: cardTitle,
                                description: text,
                            });
                            return ((0, jsx_runtime_1.jsxs)("div", { className: b('card', {
                                    'no-media': !media,
                                    [themeMod]: Boolean(themeMod),
                                }), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('card-info'), children: [(0, jsx_runtime_1.jsx)("h3", { className: b('card-title'), children: cardTitle }), (0, jsx_runtime_1.jsx)("div", { className: b('card-text'), children: (0, jsx_runtime_1.jsx)(YFMWrapper_1.default, { content: text, modifiers: { constructor: true } }) })] }), media && (0, jsx_runtime_1.jsx)(Media_1.default, { className: b('card-media'), ...allProps })] }, index));
                        }) })] }) }));
};
exports.default = PromoFeaturesBlock;
//# sourceMappingURL=PromoFeaturesBlock.js.map
