document.addEventListener('DOMContentLoaded', function () {
    const mainImage = document.getElementById('main-product-image');
    const thumbnails = document.querySelectorAll('.thumbnail');

    thumbnails.forEach(thumbnail => {
        thumbnail.addEventListener('click', function () {
            
            if(thumbnail.src == mainImage.src) {
                return; 
            }

            const newImageSrc = thumbnail.src;

            console.log(thumbnail.src)


            mainImage.src = newImageSrc;
            mainImage.alt = this.alt;

            document.querySelector('.thumbnail.active-thumbnail')?.classList.remove('active-thumbnail');
            this.classList.add('active-thumbnail');
        });
    });
});