const prevBtn = document.querySelector('.arrow--prev');
const nextBtn = document.querySelector('.arrow--next');
const items = Array.from(document.querySelectorAll('.gallery__item'));
let activeIndex = 0;

function updateGallery() {
  items.forEach((item, i) => {
    item.style.opacity = i === activeIndex ? '1' : '0.35';
    item.style.transform = i === activeIndex ? 'scale(1)' : 'scale(0.95)';
  });
}

function showNext() {
  activeIndex = (activeIndex + 1) % items.length;
  updateGallery();
}

function showPrev() {
  activeIndex = (activeIndex - 1 + items.length) % items.length;
  updateGallery();
}

nextBtn.addEventListener('click', showNext);
prevBtn.addEventListener('click', showPrev);

// keyboard support
document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowRight') {
    showNext();
  }
  if (event.key === 'ArrowLeft') {
    showPrev();
  }
});

updateGallery();