import './card-slider.scss';
import {createElement} from "../../_global/scripts/helpers";
import {createCard} from "../../components/card/CardComponent";
import $ from "jquery";
import CardSlider from "./cardslider";
import {sliderData} from "./CardSliderData";


export const createCardSlider =
    ({
         slides = sliderData,
         headline = 'Auch interessant',
         fullWidth = false,
     }) => {
        const cardSlider = createElement('section', ['card-slider','variant-subtle-primary'], null);
        if (fullWidth) {
            cardSlider.classList.add('fullwidth');
        }

        const cardSliderInner = createElement('div', ['card-slider-inner'], null, cardSlider);

        createElement('div', ['like-h2'], headline, cardSliderInner);
        const sliderComponent = createElement('div', ['card-slider-container'], null, cardSliderInner);

        slides.map((slideData, index) => {
            const card = createCard(slideData);
            sliderComponent.appendChild(card);
        })

        new CardSlider($(cardSlider));

        return cardSlider;
    }