import '@snappywc/pagination'

// 1: Create a function that will run when the page changes.
const fetchPhotos = (page) => {
  fetch(`https://picsum.photos/v2/list?page=${page}&limit=20`)
    .then((res) => res.json())
    .then((photos) => renderPhotos(photos));
};

// 2: Query your <snappy-pagination> element.
const pagination = document.querySelector("snappy-pagination");

// 3: Run the setup function with the desired options
pagination.setup({
  total: 50, // Number of pages available
  spread: 2, // Number of pages to show left/right of current page
})

// 4: Listen for the component's `page-changed` event
pagination.addEventListener("page-changed", (e) => {
  // 4.1 pass e.detail.page to your function
  fetchPhotos(e.detail.page);
});

fetchPhotos(1);