document.addEventListener("DOMContentLoaded", function () {
    const carouselContainer = document.getElementById('carousel-container');

    const mediaItems = Array(10).fill({
        type: 'image',
        src: 'https://s3-alpha-sig.figma.com/img/37a7/42fb/1daabd5424c6093ca79a6d502b3b84ef?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=FgQK8BhmZm52syueYHL8d33N9v48-lePOhb~KQgE528f-GZn8a8HXap5OvWlCdKaf2nZLlFvmgWgpnuz7iekJqEAS95CknKbniYODvBDOGMVIcHrU7YthPZ~YqZSE7pEANVBVEwkB9-1zJ77gT9uEMryjd-xb44NjnBhfLPkP4B9qlqkbuehRRhLGPBnYA9q3PHpf5ocx7j0~xAbomT~EFX2bzwBu70gKN0qTFVRy8uNu8USYah2YotQH58ChxcEPokhPxENAdNCWeDodsWVFrldbeU0CgVzCrn3MLYu9Ep96r7tjAvKfgQQqC6eORHyM-citVFu1DlJx8-CUN26RQ__',
        alt: 'Image with Caption'
    });

    const renderCarousel = () => {
        mediaItems.forEach((item, index) => {
            const halfWidthClass = index === 2 ? 'half-width' : '';
            const captionText = `Optional image caption lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum`;
            carouselContainer.innerHTML += `
                <div class="carousel-item ${halfWidthClass}">
                    ${renderMedia(item)}
                    <div class="caption">${captionText}</div>
                </div>
            `;
        });
    };

    const renderMedia = (item) => {
        if (item.type === 'image') {
            return `<img src="${item.src}" alt="${item.alt}">`;
        } else if (item.type === 'video') {
            return `<video src="${item.src}" controls class="w-full h-auto"></video>`;
        }
        return '';
    };

    renderCarousel();
});
