<div class="music">
      <h1>MUSIC</h1>
      <div id="grid" class="grid-container"></div>
   </div>
<script>const grid = document.getElementById('grid');

async function fetchArtistReleases() {
    try {
        const response = await fetch(`https://spotify-scraper.p.rapidapi.com/v1/playlist/contents?playlistId=37i9dQZF1DZ06evO2AoMsV`, {
            method: 'GET',
            headers: {
                'X-RapidAPI-Host': 'spotify-scraper.p.rapidapi.com',
                'X-RapidAPI-Key': '84658315ecmshb08295d74a0dacfp1bcb31jsn752bce356efb'
            }
        });

        if (!response.ok) {
            throw new Error('Network response was not ok');
        }

        const result = await response.json();
        console.log(result);  // Log the structure

        // Assuming the correct structure is result.contents.items where each item has album details
        const albums = result.contents.items.map(item => item.album);
        console.log(albums);
        return albums;

    } catch (error) {
        console.error('Error fetching artist releases:', error);
        return [];
    }
}

function createGridItems(albums) {
    grid.innerHTML = '';
    albums.forEach(album => {
        const item = document.createElement('div');
        item.className = 'grid-item';
        item.innerHTML = `
            <img src="${album.cover[2].url}" alt="${album.name}" class="album-art">
            <div class="track-name">${album.name}</div>
            `;
        grid.appendChild(item);
    });
}

// Initialize the grid
fetchArtistReleases().then(albums => {
    createGridItems(albums);
});
</script>