import { __assign } from "tslib";
// @ts-nocheck
import './ContentBuilderTemplate.css';
import React from 'react';
import { forwardRefWithAs } from '../../../utils/types/PropsWithAsAttributes';
import { usePropsHandler } from '../../EventInterceptor/usePropsHandler';
import { cnContentBuilderTemplate } from './index';
import { Typography } from '../../Typography/Typography';
import { Article } from '../../Article/Article';
import { CollapseGroup } from '../../CollapseGroup/CollapseGroup';
import { ContentBuilderItem } from '../ContentBuilderItem';
export var ContentBuilderTemplate = forwardRefWithAs(function (props, ref) {
    var _a = usePropsHandler(cnContentBuilderTemplate(), props), type = _a.type, title = _a.title, titleTag = _a.titleTag, text = _a.text, items = _a.items, contentBuilderItem = _a.contentBuilderItem, showCounter = _a.showCounter;
    var typeNumber = type.toString();
    var renderItemContent = function (item) {
        if (contentBuilderItem) {
            return React.createElement(ContentBuilderItem, __assign({}, item, contentBuilderItem));
        }
        else {
            return React.createElement(Article, { content: item.text });
        }
    };
    return (React.createElement("div", { className: cnContentBuilderTemplate({ type: typeNumber }) },
        title && (React.createElement(Typography.Text, { size: "xs", weight: "bold", transform: "uppercase", as: titleTag }, title)),
        text && React.createElement(Article, { content: text }),
        items && (React.createElement(CollapseGroup, { hoverEffect: true, size: "l", items: items, getItemLabel: function (item) { return item.title; }, getItemContent: renderItemContent, showCounter: showCounter }))));
});
export default ContentBuilderTemplate;
