rap_hits = transpose(rap_ojs)

// create dropdown menu with custom styling
viewof songDropdown = Inputs.select(
  rap_hits.map(d=> d.song_name),
  {
  label: html`<span style="font-size: 18px; color: #1E88E5; font-weight: bold;">Choose a Song</span>`,
  unique: true
  }
)

// Function to get the corresponding song_id for the selected song_name
function getSongId(songName) {
  const selectedSong = rap_hits.find(d => d.song_name === songName);
  return selectedSong ? selectedSong.song_id : null;
}

// Embed the iframe based on the selected song with improved styling
html`<div style="
  background: linear-gradient(135deg, #E3F2FD 0%, white 100%);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(30, 136, 229, 0.15);
  border: 2px solid #1E88E5;
  margin-top: 15px;
">
  <div style="
    background: white;
    border-radius: 12px;
    padding: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  ">
    <iframe
      style="border-radius:12px"
      src="https://open.spotify.com/embed/track/${getSongId(songDropdown)}?utm_source=generator&theme=0"
      width="100%"
      height="352"
      frameBorder="0"
      allowfullscreen=""
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
      loading="lazy">
    </iframe>
  </div>
</div>`