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 { Article } from '../../Article/Article';
import { Slider, SliderItem } from '../../Slider/Slider';
import { CaseCard } from '../../CaseCard/CaseCard';
import { Button } from '../../Button/Button';
import { generatePath } from 'react-router-dom';
import { IconSoon } from '../../../icons/IconSoon/IconSoon';
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, cases = _a.cases, aliases = _a.aliases, links = _a.links;
    var typeNumber = type.toString();
    var sliderConfig = {
        watchOverflow: true,
        navigation: true,
        slidesPerView: 'auto',
        spaceBetween: 8,
        breakpoints: {
            767: {
                spaceBetween: 16
            },
            1200: {
                spaceBetween: 24
            }
        }
    };
    return (React.createElement("div", { className: cnContentBuilderTemplate({ type: typeNumber }) },
        title && (React.createElement(Typography.Text, { size: "xs", weight: "bold", transform: "uppercase", className: cnContentBuilderTemplate('Title'), as: "h4" }, title)),
        text && (React.createElement(Article, { content: text, className: cnContentBuilderTemplate('SubTitle') })),
        (cases === null || cases === void 0 ? void 0 : cases.length) > 0 && (React.createElement(Slider, __assign({}, sliderConfig), cases.map(function (item) { return (React.createElement(SliderItem, { key: item.id },
            React.createElement(CaseCard, __assign({}, item, { buttonTitle: "case study", routePath: generatePath(aliases.CASE_PAGE, {
                    slug: item.slug
                }) })))); }))),
        (links === null || links === void 0 ? void 0 : links.length) > 0 && (React.createElement("div", { className: cnContentBuilderTemplate('Links') },
            React.createElement("div", null, links.map(function (item) { return (React.createElement(Button, { key: item.id, view: "link-primary", iconRight: item.path ? IconArrowRight : IconSoon, isLink: !!item.path, disabled: !item.path, to: item.path ? item.path : null, label: item.title })); }))))));
});
export default ContentBuilderTemplate;
