const slides = [...document.querySelectorAll(".slide")];
const counter = document.querySelector("#counter");
const root = document.documentElement;
let index = 0;

function render() {
  slides.forEach((slide, current) => slide.classList.toggle("active", current === index));
  counter.textContent = `${index + 1} / ${slides.length}`;
}

function move(delta) {
  index = (index + delta + slides.length) % slides.length;
  render();
}

document.querySelector("#next").addEventListener("click", () => move(1));
document.querySelector("#prev").addEventListener("click", () => move(-1));
document.querySelector("#theme-toggle").addEventListener("click", () => {
  root.classList.toggle("light");
});

document.addEventListener("keydown", (event) => {
  if (event.key === "ArrowRight" || event.key === " ") move(1);
  if (event.key === "ArrowLeft") move(-1);
});

render();