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';
import { EssenceCard } from '../../EssenceCard/EssenceCard';
import { Button } from '../../Button/Button';
import { Slider, SliderItem } from '../../Slider/Slider';
import { IconArrowRight } from '../../../icons/IconArrowRight/IconArrowRight';
export var ContentBuilderTemplate0 = forwardRefWithAs(function (props, ref) {
    var _a = usePropsHandler(cnContentBuilderTemplate(), props), type = _a.type, title = _a.title, videos = _a.videos, link = _a.link;
    var typeNumber = type.toString();
    var options = {
        watchOverflow: true,
        navigation: true,
        spaceBetween: 8,
        slidesPerView: 1,
        breakpoints: {
            767: {
                slidesPerView: 'auto',
                spaceBetween: 24
            },
            1199: {
                slidesPerView: 4
            }
        }
    };
    return (React.createElement("div", { className: cnContentBuilderTemplate({ type: typeNumber }) },
        title && (React.createElement(Typography.Text, { size: "xs", weight: "bold", transform: "uppercase", className: cnContentBuilderTemplate('Title') }, title)),
        (videos === null || videos === void 0 ? void 0 : videos.length) > 0 && (React.createElement(Slider, __assign({}, options),
            videos.map(function (video) { return (React.createElement(SliderItem, { key: video.videoUrl },
                React.createElement(EssenceCard, __assign({}, video, { tags: null, postDate: null })))); }),
            link && (React.createElement(SliderItem, null,
                React.createElement("a", { href: link.link, target: "_blank", className: cnContentBuilderTemplate('BlockCard'), rel: "noreferrer" },
                    React.createElement(Button, { view: "link-primary", inverted: true, label: link.title, size: "m", iconRight: IconArrowRight, as: "div", href: link.link, target: link.targetBlank ? '_blank' : null }))))))));
});
export default ContentBuilderTemplate0;
