let slideIndex = 0;
const slideIntervalSec = 5;
const slides = document.querySelectorAll('.message-item');

const showSlides = () => {
  slides.forEach((slide, index) => {
    if (index === slideIndex) {
      slide.classList.add('active');
      slide.style.display = 'block';
    } else {
      slide.classList.remove('active');
    }
  });
  slideIndex += 1;
  if (slideIndex >= slides.length) {
    slideIndex = 0;
  }
};

const startSlideShow = () => {
  showSlides(slides);
  setInterval(showSlides, slideIntervalSec * 1000);
};

slides.forEach((slide) => {
  slide.addEventListener('transitionend', (event) => {
    if (!event.target.classList.contains('active')) {
      event.target.style.display = 'none';
    }
  });
});
startSlideShow();