document.addEventListener('DOMContentLoaded', function() {
    var urlParams = new URLSearchParams(window.location.search);
    var petId = urlParams.get('id');
    var petType = urlParams.get('tipo');
  
    function exibirDetalhesPet(pet) {
        var petDetailsContainer = document.getElementById('petDetails');
      
        var card = document.createElement('div');
        card.classList.add('card', 'custom-card');
        card.innerHTML = `
          <div class="img-adote">
            <img src="${pet.imagem}" class="img-adote card-img-top" alt="${pet.nome}">
          </div>
          <div class="card-body">
            <h5 class="card-title">${pet.nome}</h5>
            <p class="card-text">Idade: ${pet.idade}</p>
            <p class="card-text">Sexo: ${pet.sexo}</p>
            ${petType === 'cachorrinho' ? `<p class="card-text">Porte: ${pet.porte}</p>` : ''}
            ${petType === 'gatinho' ? `<p class="card-text">Fase: ${pet.fase}</p>` : ''}
            <p class="card-text card-text-limit">${pet.descrição}</p>
          </div>
        `;
      
        petDetailsContainer.appendChild(card);
      }
      
  
    function lerArquivoJSON() {
      var arquivoJSON = petType === 'cachorrinho' ? 'cachorrinhos.json' : 'gatinhos.json';
  
      fetch(arquivoJSON)
        .then(response => response.json())
        .then(data => {
          var pet = data.find(pet => pet.id === parseInt(petId));
          if (pet) {
            exibirDetalhesPet(pet);
          } else {
            console.log('Pet não encontrado');
          }
        })
        .catch(error => {
          console.log('Ocorreu um erro ao ler o arquivo JSON:', error);
        });
    }
  
    lerArquivoJSON();
  });
  