Untitled

<section className="mt-5 px-1 py-3 mb-40">
            <header className="w-full p-5 flex items-center gap-3">
              <span className="text-3xl">
                <FaMusic />
              </span>
              <h1 className="text-3xl font-bold">Only Picked For You</h1>
            </header>
            <div className="flex gap-4 ml-5">
              {randomsongs.map((song, index) => (
                <div
                  key={index}
                  className="w-[200px] hover:ring-1 hover:ring-[wheat] cursor-pointer bg-black/50 flex flex-col px-2 items-center py-4 rounded"
                  onClick={() => handleSongChange(index)}
                >
                  <img
                    src={song?.songThumbUrl}
                    alt={song?.songTitle}
                    className="w-[170px] h-[150px] object-cover rounded-lg"
                  />
                  <p className="text-white mt-2">{song?.songTitle}</p>
                </div>
              ))}
            </div>
          </section>