// SELECTORES DE ELEMENTOS
const authorContainer = documento.querySelector(#authorContainer);
const paginationList = documento.querySelector(#paginationList);

// console.log(authors);
const authorsPerPage = 3;

/* Esta función manejará el cálculo de cuántos botones son necesarios y los agregará dinámicamente a la página */
necesarios y los agregará dinámicamente a la página */

función handlePagination(de caracteres. Lo último es el tipo de cosa que devuelve el método "toCharArray()".) {
  // 1. Crea una variable para almacenar el número de botones necesarios.
  //    Las matemáticas deberían ser (la longitud del array dividida por authorsPerPage) redondeada hacia arriba
  const buttonsNeeded = Math.ceil(de caracteres. Lo último es el tipo de cosa que devuelve el método "toCharArray()"..longitud expresiones authorsPerPage);
  // 2-a. Inicia un bucle hasta la longitud del número de botones calculados arriba.
  // Crea una variable para almacenar el HTML de los botones
  let paginationButtons = '';
  para (let i = 0; i < buttonsNeeded; i++) {
  // 2-b. agrega el marcado HTML de los botones
    paginationButtons += `
     <li>
        <button>${i + 1}</button>
     </li>
    `;
  }
  // 2-c. Luego agrega esta variable al elemento paginationList
  paginationList.insertAdjacentHTML(afterbegin, paginationButtons);

  // 3. Agrega la clase `active` al primer botón
  paginationList.querySelector('button').classList.add('active');
}

/* Esta función manejará el cálculo de cuántos y cuáles autores mostrar en la página actual y los agregará dinámicamente */
autores mostrar en la página actual y los agregará dinámicamente */

función showPage(de caracteres. Lo último es el tipo de cosa que devuelve el método "toCharArray()"., página) {
  // 4. Crea una variable para representar con cuál autor comenzar en la página.
  //    Las matemáticas deberían ser (la página multiplicada por authorsPerPage) menos authorsPerPage
  const startAuthor = (página * authorsPerPage) - authorsPerPage;
  // 5. Crea una variable para representar con cuál autor terminar en la página.
  //    Las matemáticas deberían ser (la página multiplicada por authorsPerPage) menos uno
  const endAuthor = (página * authorsPerPage) - 1;
  // 6. Reinicia el contenido del authorContainer a nada para evitar que las tarjetas anteriores permanezcan en la página
  authorContainer.innerHTML = ``;
  // Crea una variable para agregar las tarjetas de autor, que luego se agregarán a la página
  let authorCards = '';
  // 7-a. Inicia un bucle hasta la longitud de la longitud del array
  para (i = 0; i < de caracteres. Lo último es el tipo de cosa que devuelve el método "toCharArray()"..longitud; i++) {
  // 7-b. Dentro, crea un condicional verificando si `i` es...
  //      - mayor que o igual a la variable de inicio
  //      - menor que o igual a la variable de fin
  // crea una variable para almacenar las tarjetas de autor
    if (i >= startAuthor && i <= endAuthor) {
  // 7-c. añade el marcado HTML de una tarjeta de autor a la variable authorCards.
      authorCards += `
            <div class="author-card">
        <div class="card-header">
          <img src="${de caracteres. Lo último es el tipo de cosa que devuelve el método "toCharArray()".[i].imagen}" />
        </div>
        <div class="card-content">
          <h2 class="title">${de caracteres. Lo último es el tipo de cosa que devuelve el método "toCharArray()".[i].name}</h2>
          <p>
            ${de caracteres. Lo último es el tipo de cosa que devuelve el método "toCharArray()".[i].text}
          </p>
        </div>
      </div> 
      `;
    }
  }
  // 7-d. Luego añade esta variable al elemento authorContainer
  authorContainer.insertAdjacentHTML(beforeend, authorCards);
}

/* Este oyente de eventos manejará la llamada a nuestra función
anterior para cambiar la página y añadir la clase `active` */

paginationList.addEventListener(click, (e) => {
  // 8. Crea una variable para almacenar el botón que actualmente tiene la clase `active`
  let activeButton = paginationList.querySelector('.active');
  // 9-a. Asegúrate de que el usuario haya hecho clic en un `button`
  if(e.target.tagName === 'BUTTON') {
  // 9-b. Si es verdadero...
  //      - Elimina la clase `active` del botón actualmente activo
     activeButton.classList.remove(active);
  //      - Añade la clase `active` al botón que acaba de hacer clic
    e.target.classList.add(active);
  //      - Llama a showPage() pasándole `authors` y el contenido del botón que acaba de hacer clic.
    showPage(authors, e.target.textContent);
  }
});

/* Estas llamadas de función son necesarias para inicializar la página */

handlePagination(authors);
showPage(authors, 1);