- Será implementado as gerações posteriores e uma página de detalhamento para todos os pokemons.

function convertPokemonToLi(pokemon) {
    return `
        <li class="pokemon ${pokemon.type}">
  ->          <button class="buttonDetails" type="button">
   ->             Details
    ->        </button>
            <span class="number">#${pokemon.number}</span>
            <span class="name">${pokemon.name}</span>

            <div class="detail">
                <ol class="types">
                    ${pokemon.types.map((type) => `<li class="type ${type}">${type}</li>`).join('')}
                </ol>

                <img src="${pokemon.photo}"
                     alt="${pokemon.name}">
            </div>
        </li>
    `
}

const detailsButtonsPromise = new Promise((resolve) => {
    document.addEventListener('DOMContentLoaded', () => {
        const detailsButtons = document.querySelectorAll('.buttonDetails');
        resolve(detailsButtons);
    });
});

detailsButtonsPromise.then((detailsButtons) => {
    debugger
    console.log(detailsButtons)
    detailsButtons.forEach(button => {
        debugger
        console.log('oi');
        button.addEventListener('click', () => {
            console.log(`Clicou o botão ${button.id}`);
        });
    });
});