import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AnimateBlock, Title, YFMWrapper } from "../../components/index.js";
import Image from "../../components/Image/Image.js";
import { getMediaImage } from "../../components/Media/Image/utils.js";
import { useTheme } from "../../gravity-blocks/context/theme/index.js";
import { Col, Grid, Row } from "../../gravity-blocks/grid/index.js";
import { Content } from "../../sub-blocks/index.js";
import { block, getThemedValue } from "../../utils/index.js";
import './ExtendedFeatures.css';
const b = block('ExtendedFeaturesBlock');
const DEFAULT_SIZES = {
    all: 12,
    sm: 6,
    md: 4,
};
export const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_SIZES, animated, }) => {
    const theme = useTheme();
    const itemTitleHeadingTag = title ? 'h3' : 'h2';
    return (_jsx(AnimateBlock, { className: b(), animate: animated, children: _jsxs(Grid, { children: [_jsx(Title, { title: title, subtitle: description, className: b('header') }), _jsx("div", { className: b('items'), children: _jsx(Row, { children: items &&
                            items.map(({ title: itemTitle, text, list, link, links, label, icon, buttons, additionalInfo, }) => {
                                const itemLinks = links || [];
                                const iconThemed = icon && getThemedValue(icon, theme);
                                const iconData = iconThemed && getMediaImage(iconThemed);
                                if (link) {
                                    itemLinks.push(link);
                                }
                                return (_jsxs(Col, { className: b('item'), sizes: colSizes, children: [iconData && (_jsx("div", { className: b('icon-wrap'), "aria-hidden": true, children: _jsx(Image, { ...iconData, className: b('icon') }) })), _jsxs("div", { className: b('container'), children: [itemTitle && (_jsx(YFMWrapper, { tagName: itemTitleHeadingTag, content: itemTitle, className: b('item-title-container'), contentClassName: b('item-title'), modifiers: {
                                                        constructor: true,
                                                    }, children: label && (_jsx("span", { className: b('item-label'), children: label })) })), _jsx(Content, { text: text, links: itemLinks, size: "s", list: list, colSizes: { all: 12, md: 12 }, buttons: buttons, additionalInfo: additionalInfo })] })] }, text || itemTitle));
                            }) }) })] }) }));
};
export default ExtendedFeaturesBlock;
//# sourceMappingURL=ExtendedFeatures.js.map
