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