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