{#
/**
 * 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
 *             }
 *         }
 *     }
 * } %}
 */
#}

{# Dummy data for standalone testing/component registry #}
{% if items is not defined %}
    {% set items = [
        {
            title: 'Paracetamol 500mg',
            image: '/sites/default/images/placeholders/no-image-items-thumb.png',
            price: '£3.99',
            description: 'Effective pain relief for headaches and minor aches'
        },
        {
            title: 'Vitamin D3 Tablets',
            image: '/sites/default/images/placeholders/no-image-items-thumb.png',
            price: '£7.99',
            description: 'Supports bone health and immune system'
        },
        {
            title: 'Ibuprofen 400mg',
            image: '/sites/default/images/placeholders/no-image-items-thumb.png',
            price: '£4.49',
            description: 'Anti-inflammatory pain relief'
        },
        {
            title: 'Multivitamins',
            image: '/sites/default/images/placeholders/no-image-items-thumb.png',
            price: '£9.99',
            description: 'Complete daily nutritional support'
        },
        {
            title: 'Omega-3 Fish Oil',
            image: '/sites/default/images/placeholders/no-image-items-thumb.png',
            price: '£12.99',
            description: 'Heart and brain health support'
        },
        {
            title: 'Antihistamine Tablets',
            image: '/sites/default/images/placeholders/no-image-items-thumb.png',
            price: '£5.99',
            description: 'Relief from hay fever and allergies'
        }
    ] %}
{% endif %}

{% 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 %}
                                {# Default rendering for product-like items #}
                                {% if item.image is defined %}
                                    <div class="{{ carouselClass }}__imageWrap">
                                        <img
                                            src="{{ item.image }}"
                                            alt="{{ item.title|default('Item') }}"
                                            class="{{ carouselClass }}__image"
                                            loading="lazy"
                                        />
                                    </div>
                                {% endif %}

                                {% if item.title is defined %}
                                    <h3 class="{{ carouselClass }}__title">{{ item.title }}</h3>
                                {% endif %}

                                {% if item.description is defined %}
                                    <p class="{{ carouselClass }}__description">{{ item.description }}</p>
                                {% endif %}

                                {% if item.price is defined %}
                                    <p class="{{ carouselClass }}__price">{{ item.price }}</p>
                                {% endif %}
                            {% 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 -->
