// @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';
import { Article } from '../../Article/Article';
import { CollapseGroup } from '../../CollapseGroup/CollapseGroup';
import { Picture } from '../../Picture/Picture';
import { Grid, GridItem } from '../../Grid/Grid';
export var ContentBuilderTemplate = forwardRefWithAs(function (props, ref) {
    var _a = usePropsHandler(cnContentBuilderTemplate(), props), type = _a.type, title = _a.title, titleTag = _a.titleTag, text = _a.text, questions = _a.questions, picture = _a.picture;
    var typeNumber = type.toString();
    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 }),
        React.createElement(Grid, { breakpoints: {
                desktop: { cols: 12, gap: 'xl', yAlign: 'bottom' },
                tablet: { cols: 8 }
            } },
            questions && (React.createElement(GridItem, { breakpoints: { desktop: { col: 8 }, tablet: { col: 8 } } },
                React.createElement(CollapseGroup, { hoverEffect: true, items: questions, getItemLabel: function (item) { var _a; return (_a = item.question) !== null && _a !== void 0 ? _a : item.title; }, getItemContent: function (item) {
                        var _a;
                        return (React.createElement(Article, { content: (_a = item.answer) !== null && _a !== void 0 ? _a : item.text }));
                    } }))),
            picture && (React.createElement(GridItem, { breakpoints: {
                    desktop: { col: 2, colStart: 11 },
                    tablet: { col: 8 }
                } },
                React.createElement(Picture, { desktop: picture.url, desktopWebp: picture.urlWebp }))))));
});
export default ContentBuilderTemplate;
