import { __assign } from "tslib";
// @ts-nocheck
import './ContentBuilderTemplate.css';
import React from 'react';
import { forwardRefWithAs } from '../../../utils/types/PropsWithAsAttributes';
import { ContentCard } from '../../ContentCard/ContentCard';
import { usePropsHandler } from '../../EventInterceptor/usePropsHandler';
import { Grid, GridItem } from '../../Grid/Grid';
import { Typography } from '../../Typography/Typography';
import { cnContentBuilderTemplate } from './index';
export var ContentBuilderTemplate = forwardRefWithAs(function (props) {
    var _a = usePropsHandler(cnContentBuilderTemplate(), props), type = _a.type, title = _a.title, text = _a.text, text2 = _a.text2, columnI = _a.columnI, columnII = _a.columnII;
    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)),
        text && (React.createElement(Typography.Title, { className: cnContentBuilderTemplate('SubTitle'), size: "sm", parse: true }, text)),
        text2 && (React.createElement(Typography.Text, { className: cnContentBuilderTemplate('SubTitle2'), parse: true }, text2)),
        React.createElement(Grid, { className: cnContentBuilderTemplate('Blocks'), breakpoints: {
                desktop: { cols: 12, colGap: '3xxl' },
                tablet: { cols: 8, colGap: 's' },
                mobile: { cols: 1, rowGap: '3xxl' }
            } },
            (columnI === null || columnI === void 0 ? void 0 : columnI.length) > 0 && (React.createElement(GridItem, { breakpoints: { desktop: { col: 5 }, tablet: { col: 4 } } },
                React.createElement(Grid, { rowGap: "3xxl", cols: "1" }, columnI.map(function (item) { return (React.createElement(GridItem, { col: "1" },
                    React.createElement(ContentCard, __assign({}, item, { titleTag: "h4", titleSize: "md" })))); })))),
            (columnII === null || columnII === void 0 ? void 0 : columnII.length) > 0 && (React.createElement(GridItem, { breakpoints: {
                    desktop: { col: 5, colStart: 7 },
                    tablet: { col: 4 }
                } },
                React.createElement(Grid, { rowGap: "3xxl", cols: "1" }, columnII.map(function (item) { return (React.createElement(GridItem, { col: "1" },
                    React.createElement(ContentCard, __assign({}, item, { titleTag: "h4", titleSize: "md" })))); })))))));
});
export default ContentBuilderTemplate;
