document.addEventListener('DOMContentLoaded', function() {
    function exibirListaCachorrinhos(cachorrinhos) {
      var petListContainer = document.getElementById('petList');
  
      cachorrinhos.forEach(function(cachorrinho) {
        var card = document.createElement('div');
        card.className = 'card pet-card';
        card.innerHTML = `
  <div class="img-adote">
    <img src="${cachorrinho.imagem}" class="img-cachorrinho card-img-top" alt="${cachorrinho.nome}">
  </div>
  <div class="card-body">
    <h5 class="card-title">${cachorrinho.nome}</h5>
    <p class="card-text">Belo Horizonte, MG.</p>
    <a href="detalhes.html?id=${cachorrinho.id}&tipo=cachorrinho" class="btn-adotar btn btn-secondary">Detalhes</a>
  </div>
  `;
  
        petListContainer.appendChild(card);
      });
    }
  
    function lerArquivoJSON() {
      fetch('cachorrinhos.json')
        .then(response => response.json())
        .then(data => {
          exibirListaCachorrinhos(data);
        })
        .catch(error => {
          console.log('Ocorreu um erro ao ler o arquivo JSON:', error);
        });
    }
  
    lerArquivoJSON();
  });
  