// @ts-nocheck
import './ContentBuilderTemplate.css';
import React from 'react';
import { generatePath } from 'react-router-dom';
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 { Grid, GridItem } from '../../Grid/Grid';
import { ListLinks } from '../../ListLinks/ListLinks';
import { Button } from '../../Button/Button';
import { IconArrowRight } from '../../../icons/IconArrowRight/IconArrowRight';
export var ContentBuilderTemplate = forwardRefWithAs(function (props, ref) {
    var _a = usePropsHandler(cnContentBuilderTemplate(), props), type = _a.type, title = _a.title, text = _a.text, industry = _a.industry, aliases = _a.aliases, columnI = _a.columnI, columnII = _a.columnII, industryColor = _a.industryColor;
    var typeNumber = type.toString();
    return (React.createElement("div", { className: cnContentBuilderTemplate({ type: typeNumber }) },
        React.createElement(Typography.Title, { size: "lg", className: cnContentBuilderTemplate('Title') }, title),
        React.createElement(Grid, { breakpoints: {
                desktop: { cols: 12, gap: 'xl' },
                tablet: { cols: 8, rowGap: '3xl', colGap: 'm' },
                mobile: { cols: 2, gap: '3xl' }
            } },
            text && (React.createElement(GridItem, { breakpoints: {
                    desktop: { col: 4 },
                    tablet: { col: 8 },
                    mobile: { col: 2 }
                }, className: cnContentBuilderTemplate('Column') },
                React.createElement(Article, { content: text }),
                industry && (React.createElement("div", { className: cnContentBuilderTemplate('Button') },
                    React.createElement(Button, { view: "link-primary", isLink: true, label: industry.title, to: generatePath(aliases.INDUSTRIES_PAGE, {
                            slug: industry.slug
                        }), iconRight: IconArrowRight, decorBorder: industryColor }))))),
            (columnI === null || columnI === void 0 ? void 0 : columnI.length) > 0 && (React.createElement(GridItem, { breakpoints: {
                    desktop: { col: 4 },
                    tablet: { col: 4 },
                    mobile: { col: 2 }
                } },
                React.createElement(ListLinks, { items: columnI, getLabel: function (item) { return item.title; }, getPath: function (item) {
                        return generatePath(aliases.INDUSTRIES_PAGE_INNER, {
                            slug: industry.slug,
                            inner_page: item.slug
                        });
                    } }))),
            (columnII === null || columnII === void 0 ? void 0 : columnII.length) > 0 && (React.createElement(GridItem, { breakpoints: {
                    desktop: { col: 4 },
                    tablet: { col: 4 },
                    mobile: { col: 2 }
                } },
                React.createElement(ListLinks, { items: columnII, getLabel: function (item) { return item.title; }, getPath: function (item) {
                        return generatePath(aliases.INDUSTRIES_PAGE_INNER, {
                            slug: industry.slug,
                            inner_page: item.slug
                        });
                    } }))))));
});
export default ContentBuilderTemplate;
