import { __assign } from "tslib";
// @ts-nocheck
import './ContentBuilderTemplate.css';
import React from 'react';
import parse from 'html-react-parser';
import { forwardRefWithAs } from '../../../utils/types/PropsWithAsAttributes';
import { Article } from '../../Article/Article';
import { usePropsHandler } from '../../EventInterceptor/usePropsHandler';
import { Grid, GridItem } from '../../Grid/Grid';
import { Typography } from '../../Typography/Typography';
import { ValuesCard } from '../../ValuesCard/ValuesCard';
import { cnContentBuilderTemplate } from './index';
export var ContentBuilderTemplate = forwardRefWithAs(function (props, ref) {
    var _a = usePropsHandler(cnContentBuilderTemplate(), props), type = _a.type, title = _a.title, text = _a.text, items = _a.items;
    var typeNumber = type.toString();
    var renderList = function (items) {
        return (React.createElement("div", { className: "Article" },
            React.createElement("ul", { className: "styled-list" }, items.map(function (item) { return (React.createElement("li", { key: item }, parse(item))); }))));
    };
    return (React.createElement("div", { className: cnContentBuilderTemplate({ type: typeNumber }) },
        title && (React.createElement(Typography.Text, { size: "xs", weight: "bold", transform: "uppercase", dangerouslySetInnerHTML: { __html: title }, className: cnContentBuilderTemplate('Title') })),
        text && React.createElement(Article, { content: text, className: cnContentBuilderTemplate('Text') }),
        (items === null || items === void 0 ? void 0 : items.length) > 0 && (React.createElement(Grid, { breakpoints: {
                desktop: { cols: 12, gap: 'xl' },
                tablet: { cols: 8, colGap: 'm', rowGap: 'xl' },
                mobile: { gap: 'm' }
            } }, items.map(function (item) { return (React.createElement(GridItem, { key: item.id, breakpoints: { desktop: { col: 6 }, tablet: { col: 4 } } },
            React.createElement(ValuesCard, __assign({}, item, { size: "m", renderContent: renderList(item.items) })))); })))));
});
export default ContentBuilderTemplate;
