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 { Slider, SliderItem } from '../../Slider/Slider';
import { MemberCard } from '../../MemberCard/MemberCard';
export var ContentBuilderTemplate = forwardRefWithAs(function (props, ref) {
    var _a = usePropsHandler(cnContentBuilderTemplate(), props), type = _a.type, title = _a.title, members = _a.members, aliases = _a.aliases, cardAttrs = _a.cardAttrs;
    var typeNumber = type.toString();
    var options = {
        watchOverflow: true,
        slidesPerView: 'auto',
        spaceBetween: 8,
        navigation: true,
        breakpoints: {
            767: {
                spaceBetween: 16
            },
            1199: {
                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)),
        members && members.length > 0 && (React.createElement(Slider, __assign({}, options), members.map(function (member) {
            return (React.createElement(SliderItem, { key: member.id },
                React.createElement(MemberCard, __assign({}, member, { routePath: member.type === 1 ? aliases.TEAM_ADVISOR : aliases.TEAM_MEMBER }, cardAttrs))));
        })))));
});
export default ContentBuilderTemplate;
