// components.js
const Cards = {



  TrackCard: (trackList) => {
    const items = trackList.map(track => `
      <li class="list-group-item bg-dark py-4 text-light d-flex justify-content-between align-items-center">
        <div>
          <span class="fw-bold text-capitalize">${track.name}</span>
        </div>
        <div>
          <span class="me-3">2 credits</span>
          <button class="btn btn-sm btn-outline-light" data-uri="${track.uri}" onclick="loadTrack(this)">
            <i class="fa fa-play"></i>
          </button>
        </div>
      </li>
    `).join('');

    return `
      <div class="card jukebox-card bg-dark text-light">
        <div class="card-header fs-4 fw-bolder text-uppercase">
          All Songs <span class="fw-lighter fs-5">${trackList.length}</span>
        </div>
        <div class="card-body p-0">
          <ul class="list-group list-group-flush song-list">
            ${items}
          </ul>
        </div>
      </div>
    `;
  },

  PlaylistCard: (playlist) => `
    <div class="card playlist-card">
      <img src="${playlist.image || ''}" alt="${playlist.name}" class="playlist-art"/>
      <div class="playlist-info">
        <strong>${playlist.name}</strong>
        <small>${playlist.tracks} tracks</small>
      </div>
    </div>
  `,

  ArtistCard: (artist) => `
    <div class="card d-flex justify-content-end align-items-start px-5 text-align-center flex-column artist-card text-light">
        <div class="fs-1 fw-bold text-uppercase">${artist.name}</div>
        
        <hr class="w-100 mb-5">
        <div class="fw-bold text-uppercase">
                RELATED ARTISTS<br><br>
            
        </div>
    </div>
  `,

  AlbumCard: (album) => `
    <div class="card album-card">
      <img src="${album.image || ''}" alt="${album.title}" class="album-art"/>
      <div class="album-info">
        <strong>${album.title}</strong>
        <small>${album.year || ''}</small>
      </div>
    </div>
  `
};