mira tengo esto:

import React, { useState, useEffect, useRef } from "react";
import YouTube, { YouTubeProps, YouTubePlayer } from "react-youtube";
import {
  Play,
  Pause,
  SkipBack,
  SkipForward,
  Shuffle,
  Repeat,
  Volume1,
  Volume2,
  VolumeX,
  Maximize2,
  Home,
  Search,
  Library,
  Menu,
  X,
} from "lucide-react";
import { Button } from "./components/ui/button"; // Asegúrate de que la ruta sea correcta

// Interfaz para las canciones
interface Song {
  title: string;
  artist: string;
  album: string;
  added: string;
  duration?: number;
  albumCover?: string;
  youtubeId?: string;
}

// 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: 244,
    albumCover: "https://i.postimg.cc/y8KhsW1p/imagen-blessd.jpg",
    youtubeId: "Dftj21lTUIA",
  },
  // Puedes agregar más canciones aquí
];

const SpotifyClone = () => {
  const [currentSong, setCurrentSong] = useState<Song>(songs[0]);
  const [isPlaying, setIsPlaying] = useState<boolean>(false);
  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);
  const [isMobile, setIsMobile] = useState<boolean>(window.innerWidth < 1024);

  const playerRef = useRef<YouTubePlayer | null>(null);

  const [currentTime, setCurrentTime] = useState<number>(0);
  const [duration, setDuration] = useState<number>(0);

  const [volume, setVolume] = useState<number>(100);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 1024) {
        setIsMobile(true);
        setIsSidebarOpen(false);
      } else {
        setIsMobile(false);
        setIsSidebarOpen(true);
      }
    };

    handleResize();

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

  useEffect(() => {
    if (playerRef.current && currentSong.youtubeId) {
      playerRef.current.loadVideoById(currentSong.youtubeId);
      setCurrentTime(0);
      setDuration(0);
      if (isPlaying) {
        playerRef.current.playVideo();
      }
    }
  }, [currentSong]);

  useEffect(() => {
    if (playerRef.current) {
      if (isPlaying) {
        playerRef.current.playVideo();
      } else {
        playerRef.current.pauseVideo();
      }
    }
  }, [isPlaying]);

  // Efecto para actualizar el tiempo actual y la duración
  useEffect(() => {
    let intervalId: NodeJS.Timeout | null = null;

    if (playerRef.current && isPlaying) {
      intervalId = setInterval(() => {
        setCurrentTime(playerRef.current!.getCurrentTime());
        setDuration(playerRef.current!.getDuration());
      }, 1000);
    }

    return () => {
      if (intervalId) clearInterval(intervalId);
    };
  }, [isPlaying, playerRef.current]);

  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];
    setIsPlaying(false);
    setCurrentSong(nextSong);
    setTimeout(() => setIsPlaying(true), 500);
  };

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

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

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

    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",
    width: "0",
    playerVars: {
      autoplay: 0,
      controls: 0,
      disablekb: 1,
      fs: 0,
      modestbranding: 1,
      rel: 0,
    },
  };

  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}`;
  };

  const handleProgressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newTime = Number(e.target.value);
    if (playerRef.current) {
      playerRef.current.seekTo(newTime, true);
      setCurrentTime(newTime);
    }
  };

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

  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">
      {currentSong.youtubeId && (
        <YouTube
          videoId={currentSong.youtubeId}
          opts={opts}
          onReady={onPlayerReady}
          onEnd={onPlayerEnd}
          onStateChange={onPlayerStateChange}
        />
      )}

      {/* Barra de navegación superior */}
      <div className="flex items-center justify-between p-4 bg-gray-900">
        {/* Botón de menú (solo para dispositivos móviles) */}
        {isMobile && (
          <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>
        )}
        {/* 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>
        {/* Botones de usuario y perfil */}
        <div className="flex items-center space-x-4">
          <Button
            variant="ghost"
            size="icon"
            className="text-gray-400 hover:text-white"
            aria-label="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>

      {/* Barra lateral y contenido principal */}
      <div className="flex flex-1 overflow-hidden">
        {/* Barra lateral */}
        <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`}
        >
          <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>
          </div>
        </div>

        {/* Fondo transparente para cerrar la barra lateral en dispositivos móviles */}
        {isSidebarOpen && isMobile && (
          <div
            className="fixed inset-0 bg-black opacity-50 z-40 lg:hidden"
            onClick={() => setIsSidebarOpen(false)}
          ></div>
        )}

        {/* Contenido principal */}
        <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"}
              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>

          <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>

          <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) {
                      setIsPlaying(false);
                      setCurrentSong(track);
                      setTimeout(() => setIsPlaying(true), 500);
                    }
                  }}
                >
                  <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 ? formatTime(track.duration) : "--:--"}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Now Playing Bar (solo para dispositivos móviles) */}
      {isMobile && (
        <div className="bg-gray-900 p-2 fixed bottom-0 left-0 right-0 z-50">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2 flex-grow">
              <img
                src={currentSong.albumCover || "/placeholder.svg"}
                alt="Now playing cover"
                className="w-12 h-12 rounded"
              />
              <div>
                <p className="font-medium">{currentSong.title}</p>
                <p className="text-sm text-gray-400">{currentSong.artist}</p>
              </div>
            </div>
            <div className="flex items-center space-x-4">
              {/* Puedes agregar más botones aquí si lo deseas, como un botón de favoritos */}
              <Button
                variant="ghost"
                size="icon"
                className="text-white"
                onClick={handlePlayPause}
                aria-label={isPlaying ? "Pausar" : "Reproducir"}
              >
                {isPlaying ? (
                  <Pause className="h-6 w-6" fill="currentColor" />
                ) : (
                  <Play className="h-6 w-6" fill="currentColor" />
                )}
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* Barra de reproducción (solo para pantallas grandes) */}
      {!isMobile && (
        <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`}
        >
          <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"}
              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>

          <div className="flex flex-col items-center w-full lg: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"
              >
                <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"
              >
                <Repeat className="w-5 h-5" />
              </Button>
            </div>
            <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>

          <div className="flex items-center justify-end w-full lg:w-1/3 mt-4 lg:mt-0">
            <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;

y necesito que cuando se inicie el navegador, si n ose ha dado click a ninguna cancion, que no salga el menu del reposductor, ademas, necesito que para mobile, no salga ese navbar de arriba, que simplemente estè un buscador

tipo asi:

import { ArrowLeft, Search, MoreHorizontal, Download, UserPlus2, Shuffle, SkipBack, Play, SkipForward, Repeat, Home, LibraryBig } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function SpotifyMobile() {
  return (
    <div className="flex flex-col h-screen bg-gradient-to-b from-red-900 to-black text-white">
      {/* Status Bar */}
      <div className="flex justify-between items-center p-2 text-sm">
        <span>6:22</span>
        <div className="flex items-center space-x-1">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
            <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
            <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
            <path fillRule="evenodd" d="M1.371 8.143c5.858-5.857 15.356-5.857 21.213 0a.75.75 0 010 1.061l-.53.53a.75.75 0 01-1.06 0c-4.98-4.979-13.053-4.979-18.032 0a.75.75 0 01-1.06 0l-.53-.53a.75.75 0 010-1.06zm3.182 3.182c4.1-4.1 10.749-4.1 14.85 0a.75.75 0 010 1.061l-.53.53a.75.75 0 01-1.062 0 8.25 8.25 0 00-11.667 0 .75.75 0 01-1.06 0l-.53-.53a.75.75 0 010-1.06zm3.204 3.182a6 6 0 018.486 0 .75.75 0 010 1.061l-.53.53a.75.75 0 01-1.061 0 3.75 3.75 0 00-5.304 0 .75.75 0 01-1.06 0l-.53-.53a.75.75 0 010-1.06zm3.182 3.182a1.5 1.5 0 012.122 0 .75.75 0 010 1.061l-.53.53a.75.75 0 01-1.061 0l-.53-.53a.75.75 0 010-1.06z" clipRule="evenodd" />
          </svg>
          <span>64%</span>
        </div>
      </div>

      {/* Navigation */}
      <div className="flex items-center p-4">
        <Button variant="ghost" size="icon" className="text-white">
          <ArrowLeft className="h-6 w-6" />
        </Button>
      </div>

      {/* Search and Sort */}
      <div className="flex items-center px-4 space-x-2 mb-4">
        <div className="relative flex-grow">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
          <Input 
            type="text" 
            placeholder="Buscar en esta página" 
            className="pl-10 pr-4 py-2 w-full bg-white/10 text-white placeholder-gray-400 rounded-md focus:outline-none focus:ring-2 focus:ring-white/20"
          />
        </div>
        <Button variant="ghost" className="bg-white/10 text-white hover:bg-white/20">
          Ordenar
        </Button>
      </div>

      {/* Playlist Info */}
      <div className="px-4 mb-4 flex items-start space-x-4">
        <img src="/placeholder.svg?height=120&width=120" alt="Time Free Playlist Cover" className="w-28 h-28 object-cover rounded-md" />
        <div className="flex-1">
          <h1 className="text-3xl font-bold">Time Free</h1>
          <p className="text-gray-300">Relajao</p>
          <div className="flex items-center space-x-2 mt-2">
            <img src="/placeholder.svg?height=24&width=24" alt="Johan Morales" className="w-6 h-6 rounded-full" />
            <span className="text-sm">Johan Morales</span>
          </div>
          <p className="text-gray-300 text-xs mt-1">8 veces guardada • 71 h 52 m</p>
        </div>
      </div>

      {/* Playlist Controls */}
      <div className="flex items-center justify-between px-4 py-2 bg-black/20">
        <Button variant="ghost" size="icon" className="text-white">
          <Download className="h-6 w-6" />
        </Button>
        <Button variant="ghost" size="icon" className="text-white">
          <UserPlus2 className="h-6 w-6" />
        </Button>
        <Button variant="ghost" size="icon" className="text-white">
          <MoreHorizontal className="h-6 w-6" />
        </Button>
        <Button variant="ghost" size="icon" className="text-white">
          <Shuffle className="h-6 w-6" />
        </Button>
        <Button size="icon" className="bg-green-500 text-black rounded-full hover:bg-green-400">
          <Play className="h-6 w-6" fill="currentColor" />
        </Button>
      </div>

      {/* Song List */}
      <div className="flex-grow overflow-y-auto px-4 py-2">
        <Button variant="ghost" className="w-full justify-start text-white hover:bg-white/10">
          <span className="mr-4">+</span>
          Agregar a esta playlist
        </Button>
        <div className="mt-4 space-y-4">
          {[
            { title: "Las Piponas (Remix)", artist: "Kris R., Blessd" },
            { title: "Las Piponas (Remix)", artist: "Kris R., Blessd" },
            { title: "La Nueva Gerencia", artist: "Arcángel, Farruko" },
            { title: "Secretos", artist: "C.R.O, Kidd Keo" },
            { title: "Lo Siento", artist: "Saigo" },
          ].map((song, index) => (
            <div key={index} className="flex items-center space-x-4">
              <img src="/placeholder.svg?height=48&width=48" alt={`${song.title} cover`} className="w-12 h-12 rounded" />
              <div className="flex-grow">
                <p className="font-medium">{song.title}</p>
                <p className="text-sm text-gray-400">{song.artist}</p>
              </div>
              <Button variant="ghost" size="icon" className="text-white">
                <MoreHorizontal className="h-5 w-5" />
              </Button>
            </div>
          ))}
        </div>
      </div>

      {/* Now Playing Bar */}
      <div className="bg-gray-900 p-2">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2 flex-grow">
            <img src="/placeholder.svg?height=48&width=48" alt="Now playing cover" className="w-12 h-12 rounded" />
            <div>
              <p className="font-medium">Las Piponas (Remix)</p>
              <p className="text-sm text-gray-400">Kris R., Blessd</p>
            </div>
          </div>
          <div className="flex items-center space-x-4">
            <Button variant="ghost" size="icon" className="text-white">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
                <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
              </svg>
            </Button>
            <Button variant="ghost" size="icon" className="text-white">
              <Play className="h-6 w-6" fill="currentColor" />
            </Button>
          </div>
        </div>
      </div>

      {/* Bottom Navigation */}
      <div className="flex justify-around items-center py-2 bg-black">
        <Button variant="ghost" className="flex flex-col items-center text-white">
          <Home className="h-6 w-6" />
          <span className="text-xs">Inicio</span>
        </Button>
        <Button variant="ghost" className="flex flex-col items-center text-white">
          <Search className="h-6 w-6" />
          <span className="text-xs">Buscar</span>
        </Button>
        <Button variant="ghost" className="flex flex-col items-center text-white">
          <LibraryBig className="h-6 w-6" />
          <span className="text-xs">Tu biblioteca</span>
        </Button>
      </div>
    </div>
  )
}

me hago entender?