import { __assign } from "tslib";
// @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 { Button } from '../../Button/Button';
import { Article } from '../../Article/Article';
import { Picture } from '../../Picture/Picture';
import { Mq } from '../../Mq/Mq';
import { Grid, GridItem } from '../../Grid/Grid';
import { IconArrowRight } from '../../../icons/IconArrowRight/IconArrowRight';
export var ContentBuilderTemplate = forwardRefWithAs(function (props, ref) {
    var _a = usePropsHandler(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.createElement("div", { className: cnContentBuilderTemplate({ type: typeNumber }) },
        subtitle && (React.createElement(Typography.Text, { size: "xs", weight: "bold", transform: "uppercase", className: cnContentBuilderTemplate('Title') }, subtitle)),
        React.createElement(Grid, { breakpoints: {
                desktop: { cols: 12, gap: '2xxl' },
                tablet: { cols: 12, gap: 'm' },
                mobile: { gap: 'm' }
            } },
            React.createElement(GridItem, { breakpoints: { desktop: { col: 6 }, tablet: { col: 6 } } },
                React.createElement("div", { className: cnContentBuilderTemplate('Title2') },
                    title && React.createElement(Typography.Title, { size: "md" }, title),
                    picture && React.createElement(Picture, __assign({}, picture))),
                React.createElement(Mq, { query: "--tablet-min" }, link && (React.createElement("div", { className: cnContentBuilderTemplate('Button') },
                    React.createElement(Button, { view: "link-primary", isLink: !targetBlank, label: linkText, to: link, href: targetBlank ? link : null, as: targetBlank ? 'a' : null, iconRight: IconArrowRight, decorBorder: color === null || color === void 0 ? void 0 : color.replace('#', '') }))))),
            React.createElement(GridItem, { breakpoints: {
                    desktop: { col: 6 },
                    tablet: { col: 6 },
                    mobile: { col: 1 }
                } },
                text && (React.createElement(Article, { content: text, className: cnContentBuilderTemplate('SubTitle') })),
                React.createElement(Mq, { query: "--mobile" }, link && (React.createElement("div", { className: cnContentBuilderTemplate('Button') },
                    React.createElement(Button, { view: "link-primary", isLink: !targetBlank, label: linkText, to: link, href: targetBlank ? link : null, as: targetBlank ? 'a' : null, iconRight: IconArrowRight, decorBorder: color === null || color === void 0 ? void 0 : color.replace('#', '') }))))))));
});
export default ContentBuilderTemplate;
