import Splide from '@splidejs/splide';
import '@splidejs/splide/css/core';

document.addEventListener('DOMContentLoaded', () => {
    initCategoryPills();
    initProductSplides();
});

function initCategoryPills() {
    const pills = document.querySelectorAll('.category-pill');
    const containers = document.querySelectorAll('.category-products');

    if (pills.length === 0) {
        return;
    }

    pills.forEach((pill) => {
        pill.addEventListener('click', () => {
            const targetId = pill.dataset.categoryId;

            // Toggle pill active state
            pills.forEach((p) => {
                p.classList.remove('bg-tertiary-fixed-dim');
                p.classList.add('bg-surface');
            });
            pill.classList.add('bg-tertiary-fixed-dim');
            pill.classList.remove('bg-surface');

            // Show matching container, hide others
            containers.forEach((container) => {
                container.style.display = container.dataset.categoryId === targetId ? '' : 'none';
            });
        });
    });
}

function initProductSplides() {
    const splideElements = document.querySelectorAll('.product-splide');

    splideElements.forEach((el) => {
        new Splide(el, {
            type: 'slide',
            perPage: 3,
            perMove: 1,
            gap: '2rem',
            pagination: false,
            arrows: true,
            breakpoints: {
                1024: {
                    perPage: 2,
                },
                640: {
                    perPage: 1,
                },
            },
        }).mount();
    });
}