mira, tengo esto:

// Importaciones necesarias
import React, { useState, useEffect, useRef } from "react";
import YouTube, { YouTubeProps, YouTubePlayer } from "react-youtube";
import {
  Play,
  Pause,
  SkipBack,
  SkipForward,
  Shuffle,
  Repeat,
  Laptop2,
  Volume1,
  Volume2,
  VolumeX,
  Maximize2,
  Home,
  Search,
  Library,
  Menu,
  X,
} 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
  youtubeId?: string; // ID de YouTube
}

// Lista de canciones con youtubeId
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",
    youtubeId: "Dftj21lTUIA", // ID de YouTube
  },
  // 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);
  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true); // Visible por defecto
  const [isMobile, setIsMobile] = useState<boolean>(window.innerWidth < 1024);

  // Referencia al reproductor de YouTube
  const playerRef = useRef<YouTubePlayer | null>(null);

  // Estados para manejar el tiempo de la canción
  const [currentTime, setCurrentTime] = useState<number>(0);
  const [duration, setDuration] = useState<number>(0);

  // Estado para manejar el volumen (0-100)
  const [volume, setVolume] = useState<number>(100);

  // Interval para actualizar el tiempo actual
  const intervalRef = useRef<NodeJS.Timeout | null>(null);

  // Handlers de reproducción
  const handlePlayPause = () => {
    if (isPlaying) {
      playerRef.current?.pauseVideo();
    } else {
      if (currentSong.youtubeId) {
        playerRef.current?.playVideo();
      }
    }
    setIsPlaying(!isPlaying);
  };

  const handleNextSong = () => {
    const currentIndex = songs.indexOf(currentSong);
    const nextIndex = (currentIndex + 1) % songs.length;
    const nextSong = songs[nextIndex];
    setCurrentSong(nextSong);
    setIsPlaying(true);
  };

  const handlePreviousSong = () => {
    const currentIndex = songs.indexOf(currentSong);
    const previousIndex = (currentIndex - 1 + songs.length) % songs.length;
    const previousSong = songs[previousIndex];
    setCurrentSong(previousSong);
    setIsPlaying(true);
  };

  // Controlar el sidebar según el tamaño de pantalla
  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 1024) {
        setIsMobile(true);
        setIsSidebarOpen(false);
      } else {
        setIsMobile(false);
        setIsSidebarOpen(true);
      }
    };

    // Ejecutar al montar el componente
    handleResize();

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  // Manejar cambios en la canción actual
  useEffect(() => {
    if (playerRef.current && currentSong.youtubeId) {
      playerRef.current.loadVideoById(currentSong.youtubeId);
      setCurrentTime(0);
      setDuration(0);
      if (isPlaying) {
        playerRef.current.playVideo();
      }
    }
  }, [currentSong]);

  // Manejar cambios en el estado de reproducción
  useEffect(() => {
    if (playerRef.current) {
      if (isPlaying) {
        playerRef.current.playVideo();
      } else {
        playerRef.current.pauseVideo();
      }
    }
  }, [isPlaying]);

  // Limpiar el intervalo al desmontar el componente
  useEffect(() => {
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, []);

  const onPlayerReady: YouTubeProps["onReady"] = (event) => {
    playerRef.current = event.target;
    setDuration(event.target.getDuration());

    // Iniciar el intervalo para actualizar el tiempo
    if (!intervalRef.current) {
      intervalRef.current = setInterval(() => {
        if (playerRef.current && isPlaying) {
          setCurrentTime(playerRef.current.getCurrentTime());
        }
      }, 1000);
    }

    if (isPlaying) {
      event.target.playVideo();
    }

    // Ajustar el volumen al inicializar
    event.target.setVolume(volume);
  };

  const onPlayerEnd: YouTubeProps["onEnd"] = () => {
    handleNextSong();
  };

  const onPlayerStateChange: YouTubeProps["onStateChange"] = (event) => {
    if (event.data === window.YT.PlayerState.ENDED) {
      handleNextSong();
    }
  };

  const opts: YouTubeProps["opts"] = {
    height: "0", // Ocultar el reproductor
    width: "0",
    playerVars: {
      autoplay: 0,
      controls: 0,
      disablekb: 1,
      fs: 0,
      modestbranding: 1,
      rel: 0,
    },
  };

  // Formatear segundos a mm:ss
  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}`;
  };

  // Manejar cambio en la barra de progreso
  const handleProgressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newTime = Number(e.target.value);
    if (playerRef.current) {
      playerRef.current.seekTo(newTime, true);
      setCurrentTime(newTime);
    }
  };

  // Manejar cambio en el volumen
  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newVolume = Number(e.target.value);
    setVolume(newVolume);
    if (playerRef.current) {
      playerRef.current.setVolume(newVolume);
    }
  };

  // Manejar mute/unmute
  const toggleMute = () => {
    if (playerRef.current) {
      if (playerRef.current.isMuted()) {
        playerRef.current.unMute();
        setVolume(playerRef.current.getVolume());
      } else {
        playerRef.current.mute();
        setVolume(0);
      }
    }
  };

  return (
    <div className="flex flex-col h-screen text-gray-300 bg-black">
      {/* YouTube Player */}
      {currentSong.youtubeId && (
        <YouTube
          videoId={currentSong.youtubeId}
          opts={opts}
          onReady={onPlayerReady}
          onEnd={onPlayerEnd}
          onStateChange={onPlayerStateChange}
        />
      )}

      {/* Top bar */}
      <div className="flex items-center justify-between p-4 bg-gray-900">
        {/* Botón de toggle para la barra lateral */}
        <Button
          variant="ghost"
          size="icon"
          className="text-gray-400 hover:text-white"
          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
          aria-label={isSidebarOpen ? "Cerrar menú" : "Abrir menú"}
        >
          {isSidebarOpen ? (
            <X className="w-5 h-5" />
          ) : (
            <Menu className="w-5 h-5" />
          )}
        </Button>

        {/* Navegación central de reproducción */}
        <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>

        {/* Barra de búsqueda */}
        <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>

        {/* Usuario */}
        <div className="flex items-center space-x-4">
          <Button
            variant="ghost"
            size="icon"
            className="text-gray-400 hover:text-white"
            aria-label="Usuario"
          >
            {/* Icono de usuario */}
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12 12C15.3137 12 18 9.31371 18 6C18 2.68629 15.3137 0 12 0C8.68629 0 6 2.68629 6 6C6 9.31371 8.68629 12 12 12Z"
                fill="currentColor"
              />
              <path
                d="M12 14C8.13401 14 0 16.1188 0 19V24H24V19C24 16.1188 15.866 14 12 14Z"
                fill="currentColor"
              />
            </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={`fixed inset-y-0 left-0 z-50 w-64 p-4 overflow-y-auto bg-gray-900 transform ${
            isSidebarOpen ? "translate-x-0" : "-translate-x-full"
          } transition-transform duration-300 ease-in-out
              lg:translate-x-0 lg:static lg:inset-auto`}
        >
          {/* Contenido del Sidebar */}
          <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>

        {/* Superposición cuando el Sidebar está abierto en pantallas pequeñas */}
        {isSidebarOpen && isMobile && (
          <div
            className="fixed inset-0 bg-black opacity-50 z-40 lg:hidden"
            onClick={() => setIsSidebarOpen(false)}
          ></div>
        )}

        {/* Main content */}
        <div
          className={`flex-1 p-6 overflow-y-auto bg-gradient-to-b from-red-900 to-gray-900 transition-margin duration-300 ease-in-out ${
            isSidebarOpen && !isMobile ? "lg:ml-64" : "lg:ml-0"
          }`}
        >
          <div className="flex flex-col lg:flex-row items-center mb-6">
            <img
              src={currentSong.albumCover || "/placeholder.svg"} // Imagen actualizada
              alt="Playlist cover"
              className="w-40 h-40 mr-6 object-cover rounded-md"
            />
            <div className="text-center lg:text-left">
              <p className="text-sm font-medium">Playlist pública</p>
              <h1 className="text-5xl font-bold mb-4">Time Free</h1>
              <p className="text-sm">Relajao</p>
              <div className="flex items-center justify-center lg:justify-start 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 ? (
                <Pause fill="black" className="w-6 h-6 text-black" />
              ) : (
                <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={() => {
                    if (track.youtubeId) {
                      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"}
                        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 flex-col lg:flex-row items-center justify-between p-4 bg-gray-900 border-t border-gray-800 fixed bottom-0 left-0 right-0 ${
          !isMobile ? "lg:ml-64" : "lg:ml-0"
        } transition-margin duration-300 ease-in-out`}
      >
        {/* Información de la canción actual */}
        <div className="flex items-center mb-4 lg:mb-0 w-full lg:w-1/3 justify-center lg:justify-start">
          <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"
          />
          <div>
            <p className="font-medium">{currentSong.title}</p>
            <p className="text-sm text-gray-400">{currentSong.artist}</p>
          </div>
        </div>

        {/* Controles de reproducción y progreso */}
        <div className="flex flex-col items-center w-full lg:w-1/3">
          {/* Controles de reproducción */}
          <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 ? (
                <Pause className="w-6 h-6 text-black" />
              ) : (
                <Play 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>
          {/* Barra de tiempo */}
          <div className="flex items-center w-full space-x-2">
            <span className="text-xs text-gray-400">
              {formatTime(currentTime)}
            </span>
            <input
              type="range"
              min={0}
              max={duration}
              value={currentTime}
              onChange={handleProgressChange}
              className="flex-1 h-1 bg-gray-600 rounded-full cursor-pointer appearance-none focus:outline-none"
            />
            <span className="text-xs text-gray-400">
              {formatTime(duration)}
            </span>
          </div>
        </div>

        {/* Controles adicionales */}
        <div className="flex items-center justify-end w-full lg:w-1/3 mt-4 lg:mt-0">
          {/* Control de volumen */}
          <Button
            variant="ghost"
            size="icon"
            className="text-gray-400 hover:text-white mr-2"
            onClick={toggleMute}
            aria-label={volume === 0 ? "Desmutear" : "Mute"}
          >
            {volume === 0 ? (
              <VolumeX className="w-5 h-5" />
            ) : volume <= 50 ? (
              <Volume1 className="w-5 h-5" />
            ) : (
              <Volume2 className="w-5 h-5" />
            )}
          </Button>
          <input
            type="range"
            min={0}
            max={100}
            value={volume}
            onChange={handleVolumeChange}
            className="w-24 h-1 bg-gray-600 rounded-full cursor-pointer appearance-none focus:outline-none"
          />
          <Button
            variant="ghost"
            size="icon"
            className="text-gray-400 hover:text-white ml-2"
            aria-label="Pantalla completa"
          >
            <Maximize2 className="w-5 h-5" />
          </Button>
        </div>
      </div>
    </div>
  );
};

export default SpotifyClone;


tengo un problema y es que primero, necesito que el tiempo de la cancion se saque automaticamente con el link del video de youtube, me hago entender?, ademas, que cuando se estè reproduciendo la cancion, la barra de tiempo vaya contando los segundos, asi como spotify, como quedaria?