// @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';
export var ContentBuilderTemplate0 = forwardRefWithAs(function (props, ref) {
    var _a = usePropsHandler(cnContentBuilderTemplate(), props), type = _a.type, title = _a.title, items = _a.items;
    var typeNumber = type.toString();
    return (React.createElement("div", { className: cnContentBuilderTemplate({ type: typeNumber }) },
        title && (React.createElement(Typography.Text, { size: "xs", weight: "bold", transform: "uppercase", className: cnContentBuilderTemplate('Title') }, title)),
        (items === null || items === void 0 ? void 0 : items.length) > 0 && (React.createElement("div", { className: cnContentBuilderTemplate('List') }, items.map(function (item) {
            var _a;
            return (React.createElement("div", { key: item.id, className: cnContentBuilderTemplate('Item') },
                React.createElement(Typography.Title, { size: "lg" }, item.title),
                ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React.createElement("div", { className: "Article" },
                    React.createElement("ul", { className: "styled-list inline-styled-list" }, item.items.map(function (item) { return (React.createElement("li", { key: item }, item)); }))))));
        })))));
});
export default ContentBuilderTemplate0;
