import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useWindowSize } from '@websolutespa/bom-mixer-hooks';
import { IconLlmArrowLeft, IconLlmArrowRight } from '@websolutespa/bom-mixer-icons';
import { clamp } from '@websolutespa/bom-mixer-llm';
import { useRef } from 'react';
import { Navigation } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import { CustomCard } from '../CustomCard/custom-card';
import style from './custom-card-group.module.scss';
export const CustomCardGroup = (props)=>{
    const { item } = props;
    useWindowSize();
    const navigationPrevRef = useRef(null);
    const navigationNextRef = useRef(null);
    const swiperProps = {
        modules: [
            Navigation
        ],
        spaceBetween: clamp(16, 24),
        slidesPerView: 1.1,
        watchOverflow: true,
        navigation: {
            prevEl: navigationPrevRef.current,
            nextEl: navigationNextRef.current
        },
        breakpoints: {
            630: {
                slidesPerView: 1.5
            },
            768: {
                slidesPerView: 2
            }
        }
    };
    return /*#__PURE__*/ _jsx("div", {
        className: style.customCardGroup,
        children: /*#__PURE__*/ _jsxs(Swiper, {
            ...swiperProps,
            children: [
                /*#__PURE__*/ _jsxs("div", {
                    className: style.customCardGroupNav,
                    children: [
                        /*#__PURE__*/ _jsx("button", {
                            ref: navigationPrevRef,
                            children: /*#__PURE__*/ _jsx(IconLlmArrowLeft, {})
                        }),
                        /*#__PURE__*/ _jsx("button", {
                            ref: navigationNextRef,
                            children: /*#__PURE__*/ _jsx(IconLlmArrowRight, {})
                        })
                    ]
                }),
                item.items.map((item, i)=>/*#__PURE__*/ _jsx(SwiperSlide, {
                        className: style.customCardGroupSlide,
                        children: /*#__PURE__*/ _jsx(CustomCard, {
                            ...props,
                            item: item
                        })
                    }, i))
            ]
        })
    });
};

//# sourceMappingURL=custom-card-group.js.map