let url = "https://apis.ccbp.in/countries-data"

let searchInput = document.getElementById('searchInput')
let resultCountries = document.getElementById('resultCountries')
const spinner = document.getElementById('spinner');
let options = {
    method: 'GET'
}
let allCountries = []

function fetchCountries() {
    spinner.classList.remove('hidden');

    fetch('https://apis.ccbp.in/countries-data')
        .then(function(response) {
            return response.json()
        })
        .then(function(data) {
            allCountries = data
            renderCountries(allCountries)
            spinner.classList.add('hidden')
        })
}

function renderCountries(countries) {
    resultCountries.innerHTML = ''

    countries.forEach(function(country) {
        const card = document.createElement('div');
        card.className = 'border rounded-lg p-4 mb-3 flex items-center gap-4';

        card.innerHTML = `
        <img src="${country.flag}" class="w-12 h-8 object-cover rounded">
        <div>
          <p class="font-bold text-lg">${country.name}</p>
          <p class="text-gray-600">Population: ${country.population.toLocaleString()}</p>
        </div>
      `;

        resultCountries.appendChild(card);
    });
}
searchInput.addEventListener('input', function(e) {
    const term = e.target.value.toLowerCase();

    const filtered = allCountries.filter(function(country) {
        return country.name.toLowerCase().includes(term);
    });

    renderCountries(filtered);
});

// Start: Fetch when page loads
fetchCountries();