{#
/**
 * Generic Carousel Component
 *
 * A reusable multi-item carousel component using Swiper (via mtc-slider wrapper).
 * Supports responsive breakpoints, navigation, pagination, and autoplay.
 *
 * @param {array} items - Array of items to display in carousel
 * @param {object} options - Carousel configuration options
 * @param {string} cssClass - Additional CSS classes for the carousel wrapper
 * @param {string} itemTemplate - Twig template path for rendering each item
 *
 * Example Usage:
 *
 * {% include 'includes/elements/carousel.twig' with {
 *     items: products,
 *     cssClass: 'productCarousel',
 *     options: {
 *         perPage: 4,
 *         gap: 20,
 *         arrows: true,
 *         pagination: false,
 *         autoplay: false,
 *         loop: true,
 *         speed: 300,
 *         breakpoints: {
 *             768: {
 *                 perPage: 2,
 *                 gap: 10
 *             },
 *             480: {
 *                 perPage: 1,
 *                 arrows: false,
 *                 pagination: true
 *             }
 *         }
 *     }
 * } %}
 */
#}

{% set defaultOptions = {
    perPage: 3,
    gap: 20,
    arrows: true,
    pagination: false,
    speed: 300,
    rewind: false,
    destroy: false,
    perMove: 1
} %}

{% set carouselOptions = defaultOptions|merge(options|default({})) %}
{% set carouselClass = cssClass|default('genericCarousel') %}

{# Convert options to JSON for Vue component #}
{% set optionsJson = carouselOptions|json_encode %}

<div class="carouselWrap {{ carouselClass }}Wrap">

    <mtc-slider
        class="{{ carouselClass }}"
        :options='{{ optionsJson }}'
    >

        {% if items is defined and items is iterable %}
            {% for item in items %}

                <mtc-slide class="{{ carouselClass }}__item">

                    {% if itemTemplate is defined %}
                        {# Render custom item template if provided #}
                        {% include itemTemplate with { item: item } %}
                    {% else %}
                        {# Default item rendering #}
                        <div class="{{ carouselClass }}__content">
                            {% block carousel_item %}
                                {# Override this block or provide itemTemplate #}
                                {{ item }}
                            {% endblock %}
                        </div>
                    {% endif %}

                </mtc-slide>

            {% endfor %}
        {% else %}
            {# Allow slot content via blocks #}
            {% block carousel_slides %}
                {# Define slides here if not using items array #}
            {% endblock %}
        {% endif %}

    </mtc-slider>

</div> <!-- .carouselWrap -->
