mira tengo esto:

// SongList.tsx
import React from "react";
import { Song } from "../songs";

interface SongListProps {
  songs: Song[];
  currentSong: Song | null;
  onSongSelect: (song: Song) => void;
}

const SongList: React.FC<SongListProps> = ({
  songs,
  currentSong,
  onSongSelect,
}) => {
  return (
    <div className="px-6">
      {songs.length > 0 ? (
        <ul>
          {songs.map((song) => (
            <li
              key={song.youtubeId}
              className={`flex justify-between p-2 cursor-pointer ${
                currentSong?.youtubeId === song.youtubeId
                  ? "bg-red-700 rounded-md"
                  : "hover:bg-gray-800 rounded-md"
              }`}
              onClick={() => onSongSelect(song)}
            >
              <span>{song.title}</span>
              <span>{song.artist}</span>
            </li>
          ))}
        </ul>
      ) : (
        <p className="text-center">No se encontraron canciones.</p>
      )}
    </div>
  );
};

export default SongList;


pero necsito que visualmente se vea asi:

// SongList.tsx
import React from "react";

interface Song {
  title: string;
  artist: string;
  album: string;
  added: string;
  duration?: number;
  youtubeId?: string;
}

interface SongListProps {
  songs: Song[];
  currentSong: Song | null;
  onSongSelect: (song: Song) => void;
}

const getYouTubeThumbnail = (youtubeId: string): string =>
  `https://img.youtube.com/vi/${youtubeId}/hqdefault.jpg`;

const SongList: React.FC<SongListProps> = ({
  songs,
  currentSong,
  onSongSelect,
}) => {
  const formatTime = (seconds: number): string => {
    const minutes = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    const minutesStr = minutes < 10 ? `0${minutes}` : `${minutes}`;
    const secondsStr = secs < 10 ? `0${secs}` : `${secs}`;
    return `${minutesStr}:${secondsStr}`;
  };

  return (
    <div className="px-6">
      <table className="w-full">
        <thead>
          <tr className="text-left text-sm text-gray-400 border-b border-gray-800">
            {/* Columnas que se ocultarán en móviles */}
            <th className="hidden lg:table-cell pb-2">#</th>
            <th className="pb-2">Título</th>
            <th className="hidden lg:table-cell pb-2">Álbum</th>
            <th className="hidden lg:table-cell pb-2">
              Fecha en que se agregó
            </th>
            <th className="hidden lg:table-cell pb-2">
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M8 3.33337V12.6667"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M3.33331 8H12.6666"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </th>
          </tr>
        </thead>
        <tbody>
          {songs.map((track, index) => (
            <tr
              key={index}
              className="hover:bg-gray-800 cursor-pointer"
              onClick={() => {
                if (track.youtubeId) {
                  onSongSelect(track);
                }
              }}
            >
              {/* Columna de número oculta en móviles */}
              <td className="hidden lg:table-cell py-2">{index + 1}</td>
              <td className="py-2">
                <div className="flex items-center">
                  <img
                    src={
                      track.youtubeId
                        ? getYouTubeThumbnail(track.youtubeId)
                        : "/placeholder.svg"
                    }
                    alt="Video thumbnail"
                    className="w-10 h-10 mr-4 object-cover rounded-md"
                  />
                  <div>
                    <p
                      className={`font-medium ${
                        track.youtubeId === currentSong?.youtubeId
                          ? "text-green-500"
                          : "text-white"
                      }`}
                    >
                      {track.title}
                    </p>
                    <p className="text-sm text-gray-400">{track.artist}</p>
                  </div>
                </div>
              </td>
              {/* Columna de álbum oculta en móviles */}
              <td className="hidden lg:table-cell py-2 text-sm text-gray-400">
                {track.album}
              </td>
              {/* Columna de fecha oculta en móviles */}
              <td className="hidden lg:table-cell py-2 text-sm text-gray-400">
                {track.added}
              </td>
              {/* Columna de duración oculta en móviles */}
              <td className="hidden lg:table-cell py-2 text-sm text-gray-400">
                {track.duration ? formatTime(track.duration) : "--:--"}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default SongList;