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 { Banner } from '../../Banner/Banner';
import { Slider, SliderItem, renderFraction } from '../../Slider/Slider';
export var ContentBuilderTemplate = forwardRefWithAs(function (props, ref) {
    var _a = usePropsHandler(cnContentBuilderTemplate(), props), type = _a.type, title = _a.title, items = _a.items, id = _a.id;
    var typeNumber = type.toString();
    var options = {
        watchOverflow: true,
        spaceBetween: 1000,
        navigation: true,
        pagination: {
            el: "#pagination_".concat(id.split('-')[0]),
            clickable: true,
            type: 'fraction',
            renderFraction: renderFraction
        }
    };
    return (React.createElement("div", { className: cnContentBuilderTemplate({ type: typeNumber }) },
        title && (React.createElement(Typography.Text, { size: "xs", weight: "bold", transform: "uppercase", className: cnContentBuilderTemplate('Title') }, title)),
        (items === null || items === void 0 ? void 0 : items.length) > 0 && (React.createElement("div", { className: cnContentBuilderTemplate('Slider') },
            React.createElement(Slider, __assign({}, options), items.map(function (item) { return (React.createElement(SliderItem, null,
                React.createElement(Banner, __assign({}, item, { view: "case", bgColor: item.color, inverted: item.isInverted, titleSize: "lg" })))); })),
            React.createElement("div", { className: "swiper-pagination", id: 'pagination_' + id.split('-')[0] })))));
});
export default ContentBuilderTemplate;
