// Sample songs data - you can add your own songs here
const songs = [
  { id: 1, title: "Sweet Melody", artist: "Artist Name", duration: "3:45" },
  { id: 2, title: "Pink Dreams", artist: "Artist Name", duration: "4:12" },
  { id: 3, title: "Sunset Vibes", artist: "Artist Name", duration: "3:30" },
  { id: 4, title: "Cosmic Love", artist: "Artist Name", duration: "4:05" },
  { id: 5, title: "Dancing in Pink", artist: "Artist Name", duration: "3:55" },
  { id: 6, title: "Midnight Rose", artist: "Artist Name", duration: "4:20" },
];

function App() {
  return (
    <main className="min-h-screen bg-gradient-to-b from-pink-100 via-pink-200 to-pink-300">
      {/* Header */}
      <header className="py-8 px-4 text-center">
        <h1 className="text-4xl sm:text-5xl font-bold text-pink-800 mb-2">
          🎵 My Songs
        </h1>
        <p className="text-pink-600 text-lg">A collection of my favorite tunes</p>
      </header>

      {/* Songs Container */}
      <div className="max-w-2xl mx-auto px-4 pb-12">
        <div className="bg-white/60 backdrop-blur-sm rounded-3xl shadow-xl overflow-hidden">
          {/* Playlist Header */}
          <div className="bg-pink-400 px-6 py-4 flex items-center justify-between">
            <span className="text-white font-semibold">Playlist</span>
            <span className="text-white/80 text-sm">{songs.length} songs</span>
          </div>

          {/* Songs List */}
          <ul className="divide-y divide-pink-100">
            {songs.map((song, index) => (
              <li
                key={song.id}
                className="px-6 py-4 flex items-center justify-between hover:bg-pink-50/80 transition-colors duration-200 cursor-pointer group"
              >
                <div className="flex items-center gap-4">
                  <span className="text-pink-300 font-medium w-6 text-center group-hover:text-pink-500 transition-colors">
                    {index + 1}
                  </span>
                  <div>
                    <p className="font-semibold text-gray-800 group-hover:text-pink-600 transition-colors">
                      {song.title}
                    </p>
                    <p className="text-sm text-pink-500">{song.artist}</p>
                  </div>
                </div>
                <span className="text-pink-400 text-sm font-medium group-hover:text-pink-600 transition-colors">
                  {song.duration}
                </span>
              </li>
            ))}
          </ul>
        </div>

        {/* Add Song Button */}
        <button className="mt-6 w-full py-3 bg-pink-500 hover:bg-pink-600 text-white font-semibold rounded-2xl shadow-lg hover:shadow-xl transition-all duration-200">
          + Add New Song
        </button>
      </div>

      {/* Footer */}
      <footer className="text-center py-6 text-pink-600/70 text-sm">
        Made with 💖 for music lovers
      </footer>
    </main>
  );
}

export default App;