// @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 { ListLinks } from '../../ListLinks/ListLinks';
import { Mq } from '../../Mq/Mq';
import { Grid, GridItem } from '../../Grid/Grid';
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();
    return (React.createElement("div", { className: cnContentBuilderTemplate({ type: typeNumber }) },
        React.createElement(Grid, { breakpoints: { desktop: { cols: 12, gap: 'xl' } } },
            (title || text) && (React.createElement(GridItem, { breakpoints: { desktop: { col: 5 } } },
                title && (React.createElement(Typography.Title, { size: "lg", className: cnContentBuilderTemplate('Title') }, title)),
                text && (React.createElement(Article, { content: text, className: cnContentBuilderTemplate('SubTitle') })))),
            (items === null || items === void 0 ? void 0 : items.length) > 0 && (React.createElement(GridItem, { breakpoints: { desktop: { col: 5, colStart: 7 } } },
                React.createElement(Mq, { query: "--desktop" },
                    React.createElement(ListLinks, { items: items, getLabel: function (item) { return item.title; }, getPath: function (item) { return item.path; } })),
                React.createElement(Mq, { query: "--mobile" },
                    React.createElement(ListLinks, { items: items, getLabel: function (item) { return item.title; }, getPath: function (item) { return item.path; } })),
                React.createElement(Mq, { query: "--tablet" },
                    React.createElement(Grid, { cols: "2", gap: "m" },
                        React.createElement(GridItem, { col: "1" },
                            React.createElement(ListLinks, { items: items.filter(function (w, index) { return (index & 1) === 0; }), getLabel: function (item) { return item.title; }, getPath: function (item) { return item.path; } })),
                        React.createElement(GridItem, { col: "1" },
                            React.createElement(ListLinks, { items: items.filter(function (w, index) { return (index & 1) !== 0; }), getLabel: function (item) { return item.title; }, getPath: function (item) { return item.path; } })))))))));
});
export default ContentBuilderTemplate;
