import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimateBlock from "../../components/AnimateBlock/AnimateBlock.js";
import BalancedMasonry from "../../components/BalancedMasonry/BalancedMasonry.js";
import FullWidthBackground from "../../components/FullWidthBackground/FullWidthBackground.js";
import Media from "../../components/Media/Media.js";
import Title from "../../components/Title/Title.js";
import YFMWrapper from "../../components/YFMWrapper/YFMWrapper.js";
import { BREAKPOINTS } from "../../constants.js";
import { useTheme } from "../../gravity-blocks/context/theme/index.js";
import { Grid } from "../../gravity-blocks/grid/index.js";
import { block, getThemedValue } from "../../utils/index.js";
import { mergeVideoMicrodata } from "../../utils/microdata.js";
import './PromoFeaturesBlock.css';
const b = block('PromoFeaturesBlock');
const breakpointColumns = {
    [BREAKPOINTS.lg]: 3,
    [BREAKPOINTS.md]: 2,
    [BREAKPOINTS.sm]: 1,
};
const PromoFeaturesBlock = (props) => {
    const { items, title, description, theme, animated = true } = props;
    const backgroundTheme = theme || 'default';
    const globalTheme = useTheme();
    return (_jsx(Grid, { children: _jsxs(AnimateBlock, { className: b({ [backgroundTheme]: true }), animate: animated, children: [_jsx(FullWidthBackground, { className: b('background', { [backgroundTheme]: true }) }), _jsx(Title, { title: title, subtitle: description, className: b('header') }), _jsx(BalancedMasonry, { 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 = getThemedValue(media, globalTheme);
                            const allProps = mergeVideoMicrodata(themedMedia, {
                                name: cardTitle,
                                description: text,
                            });
                            return (_jsxs("div", { className: b('card', {
                                    'no-media': !media,
                                    [themeMod]: Boolean(themeMod),
                                }), children: [_jsxs("div", { className: b('card-info'), children: [_jsx("h3", { className: b('card-title'), children: cardTitle }), _jsx("div", { className: b('card-text'), children: _jsx(YFMWrapper, { content: text, modifiers: { constructor: true } }) })] }), media && _jsx(Media, { className: b('card-media'), ...allProps })] }, index));
                        }) })] }) }));
};
export default PromoFeaturesBlock;
//# sourceMappingURL=PromoFeaturesBlock.js.map
