document.addEventListener('DOMContentLoaded', () => {
    const petCard = document.getElementById('pet-card');
    const likeBtn = document.getElementById('like-btn');
    const dislikeBtn = document.getElementById('dislike-btn');

    

    let currentPetIndex = 0;

    function renderPet() {
        if (currentPetIndex >= pets.length) {
            petCard.innerHTML = `<div class="card-body text-center"><h5 class="card-title">Больше питомцев нет!</h5></div>`;
            likeBtn.disabled = true;
            dislikeBtn.disabled = true;
            return;
        }

        const pet = pets[currentPetIndex];
        petCard.innerHTML = `
            <img src="${pet.photo_url}" class="card-img-top" alt="${pet.name}">
            <div class="card-body">
                <h5 class="card-title">${pet.name}</h5>
                <p class="card-text"><strong>Возраст:</strong> ${pet.age}</p>
                <p class="card-text"><strong>Порода:</strong> ${pet.breed}</p>
            </div>
        `;
    }

    function showNextPet() {
        currentPetIndex++;
        renderPet();
    }

    likeBtn.addEventListener('click', showNextPet);
    dislikeBtn.addEventListener('click', showNextPet);

    renderPet();
});