"use strict";
exports.__esModule = true;
exports.ContentBuilderTemplate = void 0;
var tslib_1 = require("tslib");
// @ts-nocheck
require("./ContentBuilderTemplate.css");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var PropsWithAsAttributes_1 = require("../../../utils/types/PropsWithAsAttributes");
var usePropsHandler_1 = require("../../EventInterceptor/usePropsHandler");
var index_1 = require("./index");
var Typography_1 = require("../../Typography/Typography");
var Button_1 = require("../../Button/Button");
var Article_1 = require("../../Article/Article");
var Picture_1 = require("../../Picture/Picture");
var Mq_1 = require("../../Mq/Mq");
var Grid_1 = require("../../Grid/Grid");
var IconArrowRight_1 = require("../../../icons/IconArrowRight/IconArrowRight");
exports.ContentBuilderTemplate = (0, PropsWithAsAttributes_1.forwardRefWithAs)(function (props, ref) {
    var _a = (0, usePropsHandler_1.usePropsHandler)((0, index_1.cnContentBuilderTemplate)(), props), type = _a.type, subtitle = _a.subtitle, title = _a.title, text = _a.text, link = _a.link, linkText = _a.linkText, targetBlank = _a.targetBlank, color = _a.color, picture = _a.picture;
    var typeNumber = type.toString();
    return (react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)({ type: typeNumber }) },
        subtitle && (react_1["default"].createElement(Typography_1.Typography.Text, { size: "xs", weight: "bold", transform: "uppercase", className: (0, index_1.cnContentBuilderTemplate)('Title') }, subtitle)),
        react_1["default"].createElement(Grid_1.Grid, { breakpoints: {
                desktop: { cols: 12, gap: '2xxl' },
                tablet: { cols: 12, gap: 'm' },
                mobile: { gap: 'm' }
            } },
            react_1["default"].createElement(Grid_1.GridItem, { breakpoints: { desktop: { col: 6 }, tablet: { col: 6 } } },
                react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)('Title2') },
                    title && react_1["default"].createElement(Typography_1.Typography.Title, { size: "md" }, title),
                    picture && react_1["default"].createElement(Picture_1.Picture, (0, tslib_1.__assign)({}, picture))),
                react_1["default"].createElement(Mq_1.Mq, { query: "--tablet-min" }, link && (react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)('Button') },
                    react_1["default"].createElement(Button_1.Button, { view: "link-primary", isLink: !targetBlank, label: linkText, to: link, href: targetBlank ? link : null, as: targetBlank ? 'a' : null, iconRight: IconArrowRight_1.IconArrowRight, decorBorder: color === null || color === void 0 ? void 0 : color.replace('#', '') }))))),
            react_1["default"].createElement(Grid_1.GridItem, { breakpoints: {
                    desktop: { col: 6 },
                    tablet: { col: 6 },
                    mobile: { col: 1 }
                } },
                text && (react_1["default"].createElement(Article_1.Article, { content: text, className: (0, index_1.cnContentBuilderTemplate)('SubTitle') })),
                react_1["default"].createElement(Mq_1.Mq, { query: "--mobile" }, link && (react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)('Button') },
                    react_1["default"].createElement(Button_1.Button, { view: "link-primary", isLink: !targetBlank, label: linkText, to: link, href: targetBlank ? link : null, as: targetBlank ? 'a' : null, iconRight: IconArrowRight_1.IconArrowRight, decorBorder: color === null || color === void 0 ? void 0 : color.replace('#', '') }))))))));
});
exports["default"] = exports.ContentBuilderTemplate;
