hola, mira tengo esto:

// Importaciones necesarias
import { useState } from "react";
import {
  Play,
  SkipBack,
  SkipForward,
  Shuffle,
  Repeat,
  Laptop2,
  Volume1,
  Maximize2,
  Home,
  Search,
  Library,
} from "lucide-react";
import { Button } from "./components/ui/button";

// Interfaz para las canciones
interface Song {
  title: string;
  artist: string;
  album: string;
  added: string;
  duration: string;
  albumCover?: string; // URL opcional de la imagen del álbum
}

// Lista de canciones
const songs: Song[] = [
  {
    title: "Las Piponas (Remix)",
    artist: "Kris R., Blessed",
    album: "Las Piponas (Remix)",
    added: "hace 2 horas",
    duration: "4:04",
    albumCover: "https://i.postimg.cc/y8KhsW1p/imagen-blessd.jpg",
  },
  {
    title: "La Nueva Gerencia",
    artist: "Arcángel, Farruko",
    album: "Arca (The Mixtape)",
    added: "hace 1 día",
    duration: "4:36",
    albumCover: "https://i.postimg.cc/y8KhsW1p/imagen-blessd.jpg",
  },
  {
    title: "Secretos",
    artist: "C.R.O, Kidd Keo",
    album: "Secretos",
    added: "hace 1 día",
    duration: "2:41",
    // Sin albumCover para demostrar el placeholder
  },
  {
    title: "Lo Siento",
    artist: "Saigo",
    album: "Lo Siento",
    added: "hace 1 día",
    duration: "3:13",
    // Sin albumCover para demostrar el placeholder
  },
  // Puedes agregar más canciones aquí
];

const SpotifyClone = () => {
  // Estados para la canción actual y el estado de reproducción
  const [currentSong, setCurrentSong] = useState<Song>(songs[0]);
  const [isPlaying, setIsPlaying] = useState<boolean>(false);

  // Manejadores de eventos
  const handlePlayPause = () => {
    setIsPlaying(!isPlaying);
  };

  const handleNextSong = () => {
    const currentIndex = songs.indexOf(currentSong);
    const nextIndex = (currentIndex + 1) % songs.length;
    setCurrentSong(songs[nextIndex]);
    setIsPlaying(true); // Iniciar reproducción automáticamente
  };

  const handlePreviousSong = () => {
    const currentIndex = songs.indexOf(currentSong);
    const previousIndex = (currentIndex - 1 + songs.length) % songs.length;
    setCurrentSong(songs[previousIndex]);
    setIsPlaying(true); // Iniciar reproducción automáticamente
  };

  return (
    <div className="flex flex-col h-screen text-gray-300 bg-black">
      {/* Top bar */}
      <div className="flex items-center justify-between p-4 bg-gray-900">
        <div className="flex items-center space-x-4">
          <Button
            variant="ghost"
            size="icon"
            className="text-gray-400 hover:text-white"
            onClick={handlePreviousSong}
            aria-label="Anterior"
          >
            <SkipBack className="w-5 h-5" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            className="text-gray-400 hover:text-white"
            onClick={handleNextSong}
            aria-label="Siguiente"
          >
            <SkipForward className="w-5 h-5" />
          </Button>
        </div>
        <div className="flex-1 max-w-xl mx-4">
          <input
            type="text"
            placeholder="¿Qué quieres reproducir?"
            className="w-full px-4 py-2 text-sm bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-green-500"
          />
        </div>
        <div className="flex items-center space-x-4">
          <Button
            variant="ghost"
            size="icon"
            className="text-gray-400 hover:text-white"
            aria-label="Ubicación"
          >
            {/* Icono de ubicación */}
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </Button>
          <div className="w-8 h-8 bg-green-500 rounded-full"></div>
        </div>
      </div>

      <div className="flex flex-1 overflow-hidden">
        {/* Sidebar */}
        <div className="w-64 p-4 overflow-y-auto bg-gray-900">
          <div className="mb-6">
            <Button
              variant="ghost"
              className="w-full justify-start text-gray-400 hover:text-white mb-2"
              aria-label="Inicio"
            >
              <Home className="w-5 h-5 mr-3" />
              Inicio
            </Button>
            <Button
              variant="ghost"
              className="w-full justify-start text-gray-400 hover:text-white mb-2"
              aria-label="Buscar"
            >
              <Search className="w-5 h-5 mr-3" />
              Buscar
            </Button>
            <Button
              variant="ghost"
              className="w-full justify-start text-gray-400 hover:text-white"
              aria-label="Tu biblioteca"
            >
              <Library className="w-5 h-5 mr-3" />
              Tu biblioteca
            </Button>
          </div>
          <div className="pt-4 border-t border-gray-800">
            <h2 className="mb-4 text-sm font-semibold text-gray-400 uppercase">
              Playlists
            </h2>
            <Button
              variant="ghost"
              className="w-full justify-start text-white bg-gray-800 hover:bg-gray-700 mb-2 flex items-center"
              aria-label="Time Free"
            >
              <div className="w-12 h-12 mr-3 bg-gradient-to-br from-purple-700 to-blue-400 rounded-md"></div>
              Time Free
            </Button>
            {/* Puedes agregar más playlists aquí */}
          </div>
        </div>

        {/* Main content */}
        <div className="flex-1 p-6 overflow-y-auto bg-gradient-to-b from-red-900 to-gray-900">
          <div className="flex items-center mb-6">
            <img
              src="https://i.postimg.cc/y8KhsW1p/imagen-blessd.jpg" // Imagen actualizada
              alt="Playlist cover"
              className="w-40 h-40 mr-6 object-cover rounded-md"
            />
            <div>
              <p className="text-sm font-medium">Playlist pública</p>
              <h1 className="text-5xl font-bold mb-4">Time Free</h1>{" "}
              {/* Reducido de 8xl a 5xl */}
              <p className="text-sm">Relajao</p>
              <div className="flex items-center mt-2">
                <div className="w-6 h-6 rounded-full bg-green-500 mr-2"></div>
                <span className="text-sm">
                  Johan Morales • 8 veces guardada • 1253 canciones, 72 h 6 min
                </span>
              </div>
            </div>
          </div>

          {/* Controles de playlist */}
          <div className="flex items-center space-x-4 mb-6">
            <Button
              size="lg"
              className="rounded-full bg-green-500 hover:bg-green-400"
              onClick={handlePlayPause}
              aria-label={isPlaying ? "Pausar" : "Reproducir"}
            >
              {isPlaying ? (
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="black"
                  viewBox="0 0 24 24"
                  strokeWidth="2"
                  stroke="currentColor"
                  className="w-6 h-6 text-black"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M6 6h4v12H6V6zm8 0h4v12h-4V6z"
                  />
                </svg>
              ) : (
                <Play fill="black" className="w-6 h-6 text-black" />
              )}
            </Button>
            <Button
              variant="outline"
              size="icon"
              className="rounded-full"
              aria-label="Agregar a la cola"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M4.5 12.75L19.5 12.75"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M12 5.25L12 20.25"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </Button>
            <Button variant="ghost" size="icon" aria-label="Más opciones">
              •••
            </Button>
          </div>

          {/* Tabla de canciones */}
          <table className="w-full">
            <thead>
              <tr className="text-left text-sm text-gray-400 border-b border-gray-800">
                <th className="pb-2">#</th>
                <th className="pb-2">Título</th>
                <th className="pb-2">Álbum</th>
                <th className="pb-2">Fecha en que se agregó</th>
                <th className="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={() => {
                    setCurrentSong(track);
                    setIsPlaying(true);
                  }}
                >
                  <td className="py-2">{index + 1}</td>
                  <td className="py-2">
                    <div className="flex items-center">
                      <img
                        src={track.albumCover || "/placeholder.svg"} // Usar imagen placeholder si no hay albumCover
                        alt="Album cover"
                        className="w-10 h-10 mr-4 object-cover rounded-md"
                      />
                      <div>
                        <p className="font-medium">{track.title}</p>
                        <p className="text-sm text-gray-400">{track.artist}</p>
                      </div>
                    </div>
                  </td>
                  <td className="py-2 text-sm text-gray-400">{track.album}</td>
                  <td className="py-2 text-sm text-gray-400">{track.added}</td>
                  <td className="py-2 text-sm text-gray-400">
                    {track.duration}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Footer / Playback controls */}
      <div className="flex items-center justify-between p-4 bg-gray-900 border-t border-gray-800">
        {/* Información de la canción actual */}
        <div className="flex items-center w-1/3">
          <img
            src={currentSong.albumCover || "/placeholder.svg"} // Usar imagen placeholder si no hay albumCover
            alt="Album cover"
            className="w-10 h-10 mr-4 object-cover rounded-md" // Tamaño reducido
          />
          <div>
            <p className="font-medium">{currentSong.title}</p>
            <p className="text-sm text-gray-400">{currentSong.artist}</p>
          </div>
        </div>

        {/* Controles de reproducción */}
        <div className="flex flex-col items-center w-1/3">
          <div className="flex items-center space-x-4 mb-2">
            <Button
              variant="ghost"
              size="icon"
              className="text-gray-400 hover:text-white"
              aria-label="Shuffle"
              // Implementa la funcionalidad Shuffle si lo deseas
            >
              <Shuffle className="w-5 h-5" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              className="text-gray-400 hover:text-white"
              onClick={handlePreviousSong}
              aria-label="Anterior"
            >
              <SkipBack className="w-5 h-5" />
            </Button>
            <Button
              size="icon"
              className={`rounded-full bg-white hover:bg-gray-200`}
              onClick={handlePlayPause}
              aria-label={isPlaying ? "Pausar" : "Reproducir"}
            >
              {isPlaying ? (
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="black"
                  viewBox="0 0 24 24"
                  strokeWidth="2"
                  stroke="currentColor"
                  className="w-6 h-6 text-black"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M6 6h4v12H6V6zm8 0h4v12h-4V6z"
                  />
                </svg>
              ) : (
                <Play fill="black" className="w-6 h-6 text-black" />
              )}
            </Button>
            <Button
              variant="ghost"
              size="icon"
              className="text-gray-400 hover:text-white"
              onClick={handleNextSong}
              aria-label="Siguiente"
            >
              <SkipForward className="w-5 h-5" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              className="text-gray-400 hover:text-white"
              aria-label="Repetir"
              // Implementa la funcionalidad Repeat si lo deseas
            >
              <Repeat className="w-5 h-5" />
            </Button>
          </div>
          <div className="flex items-center w-full">
            <span className="text-xs text-gray-400 mr-2">0:00</span>
            <div className="flex-1 h-1 bg-gray-600 rounded-full relative">
              <div className="w-1/4 h-1 bg-white rounded-full"></div>
            </div>
            <span className="text-xs text-gray-400 ml-2">
              {currentSong.duration}
            </span>
          </div>
        </div>

        {/* Controles adicionales */}
        <div className="flex items-center justify-end w-1/3 space-x-4">
          <Button
            variant="ghost"
            size="icon"
            className="text-gray-400 hover:text-white"
            aria-label="Conectar a un dispositivo"
          >
            <Laptop2 className="w-5 h-5" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            className="text-gray-400 hover:text-white"
            aria-label="Control de volumen"
          >
            <Volume1 className="w-5 h-5" />
          </Button>
          <div className="w-24 h-1 bg-gray-600 rounded-full relative">
            <div className="w-1/2 h-1 bg-white rounded-full"></div>
          </div>
          <Button
            variant="ghost"
            size="icon"
            className="text-gray-400 hover:text-white"
            aria-label="Pantalla completa"
          >
            <Maximize2 className="w-5 h-5" />
          </Button>
        </div>
      </div>
    </div>
  );
};

export default SpotifyClone;

pero necesito implementar la api key de spotify en mi proyecto para que me salga ya la infromacion de mi cuenta