mira, tengo esto:

import React from "react";
import {
  Shuffle,
  SkipBack,
  Play,
  Pause,
  SkipForward,
  Repeat,
  Download,
  Mic2,
  Share2,
  ChevronDown,
  MoreHorizontal,
} from "lucide-react";
import { Button } from "./ui/button";
import { Slider } from "./ui/slider";

interface Song {
  title: string;
  artist: string;
  youtubeId?: string;
}

interface FullScreenPlayerProps {
  currentSong: Song;
  isPlaying: boolean;
  onPlayPause: () => void;
  onNextSong: () => void;
  onPreviousSong: () => void;
  onShuffle: () => void;
  onRepeat: () => void;
  onVolumeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  volume: number;
  onProgressChange: (values: number[]) => void;
  currentTime: number;
  duration: number;
  onClose: () => void;
  isShuffle: boolean;
}

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

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 FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({
  currentSong,
  isPlaying,
  onPlayPause,
  onNextSong,
  onPreviousSong,
  onShuffle,
  onRepeat,
  onVolumeChange,
  volume,
  onProgressChange,
  currentTime,
  duration,
  onClose,
  isShuffle,
}) => {
  return (
    <div className="flex flex-col h-screen bg-gradient-to-b from-gray-900 to-black text-white">
      <div className="flex justify-between items-center p-4">
        <Button
          variant="ghost"
          size="icon"
          className="text-white"
          onClick={onClose}
        >
          <ChevronDown className="h-6 w-6" />
        </Button>
        <span className="text-sm font-semibold">Time Free</span>
        <Button variant="ghost" size="icon" className="text-white">
          <MoreHorizontal className="h-6 w-6" />
        </Button>
      </div>

      <div className="flex-grow flex items-center justify-center p-4">
        <img
          src={
            currentSong.youtubeId
              ? getYouTubeThumbnail(currentSong.youtubeId)
              : "/placeholder.svg"
          }
          alt="Album Art"
          className="w-full h-full max-w-xs max-h-xs object-cover rounded-lg"
        />
      </div>

      <div className="px-4 py-2">
        <h2 className="text-2xl font-bold">{currentSong.title}</h2>
        <p className="text-gray-400">{currentSong.artist}</p>
      </div>

      <div className="px-4 py-2">
        <Slider
          value={[(currentTime / duration) * 100 || 0]}
          max={100}
          step={1}
          onValueChange={onProgressChange}
          className="w-full"
        />
        <div className="flex justify-between text-xs text-gray-400 mt-1">
          <span>{formatTime(currentTime)}</span>
          <span>-{formatTime(duration - currentTime)}</span>
        </div>
      </div>

      <div className="flex justify-between items-center px-4 py-6">
        <Button
          variant="ghost"
          size="icon"
          className={`text-white ${isShuffle ? "text-green-500" : ""}`}
          onClick={onShuffle}
          aria-label="Shuffle"
        >
          <Shuffle className="h-6 w-6" />
        </Button>
        <Button
          variant="ghost"
          size="icon"
          className="text-white"
          onClick={onPreviousSong}
          aria-label="Anterior"
        >
          <SkipBack className="h-6 w-6" />
        </Button>
        <Button
          size="icon"
          className="bg-white text-black rounded-full hover:bg-gray-200 h-16 w-16"
          onClick={onPlayPause}
          aria-label={isPlaying ? "Pausar" : "Reproducir"}
        >
          {isPlaying ? (
            <Pause className="h-8 w-8" fill="currentColor" />
          ) : (
            <Play className="h-8 w-8" fill="currentColor" />
          )}
        </Button>
        <Button
          variant="ghost"
          size="icon"
          className="text-white"
          onClick={onNextSong}
          aria-label="Siguiente"
        >
          <SkipForward className="h-6 w-6" />
        </Button>
        <Button
          variant="ghost"
          size="icon"
          className="text-white"
          onClick={onRepeat}
          aria-label="Repetir"
        >
          <Repeat className="h-6 w-6" />
        </Button>
      </div>

      <div className="flex justify-between items-center px-4 py-4">
        <Button variant="ghost" size="icon" className="text-white">
          <Download className="w-6 h-6" />
        </Button>
        <Button variant="ghost" size="icon" className="text-white">
          <Mic2 className="h-6 w-6" />
        </Button>
        <Button variant="ghost" size="icon" className="text-white">
          <Share2 className="h-6 w-6" />
        </Button>
      </div>
    </div>
  );
};

export default FullScreenPlayer;

pero necesito que sea este diseño:

import React from "react"
import {
  Shuffle,
  SkipBack,
  Play,
  Pause,
  SkipForward,
  Repeat,
  Download,
  Mic2,
  Share2,
  ChevronDown,
  MoreHorizontal,
  Clock,
  User
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"

interface Song {
  title: string
  artist: string
  youtubeId?: string
}

interface FullScreenPlayerProps {
  currentSong: Song
  isPlaying: boolean
  onPlayPause: () => void
  onNextSong: () => void
  onPreviousSong: () => void
  onShuffle: () => void
  onRepeat: () => void
  onVolumeChange: (e: React.ChangeEvent<HTMLInputElement>) => void
  volume: number
  onProgressChange: (values: number[]) => void
  currentTime: number
  duration: number
  onClose: () => void
  isShuffle: boolean
}

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

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

export default function Component({
  currentSong,
  isPlaying,
  onPlayPause,
  onNextSong,
  onPreviousSong,
  onShuffle,
  onRepeat,
  onVolumeChange,
  volume,
  onProgressChange,
  currentTime,
  duration,
  onClose,
  isShuffle,
}: FullScreenPlayerProps) {
  return (
    <div className="flex flex-col min-h-screen bg-[#2941AB] text-white">
      <div className="relative">
        <div className="absolute inset-0 bg-gradient-to-b from-black/40 to-black/60" />
        <div className="relative z-10 p-8">
          <div className="flex items-start gap-6">
            <img
              src={currentSong.youtubeId ? getYouTubeThumbnail(currentSong.youtubeId) : "/placeholder.svg"}
              alt="Playlist Cover"
              className="w-48 h-48 object-cover shadow-xl"
            />
            <div className="flex flex-col gap-2">
              <span className="text-sm font-medium">Playlist pública</span>
              <h1 className="text-7xl font-bold tracking-tighter">Time Free</h1>
              <div className="flex items-center gap-2 mt-4">
                <div className="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center">
                  <User className="w-4 h-4 text-gray-600" />
                </div>
                <span className="font-semibold">Johan Morales</span>
                <span className="text-white/60">• 10 veces guardada</span>
                <span className="text-white/60">• 1304 canciones,</span>
                <div className="flex items-center gap-1 text-white/60">
                  <Clock className="w-4 h-4" />
                  <span>74 h 48 min</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="flex-1 bg-gradient-to-b from-black/40 to-black p-8">
        <div className="flex items-center gap-4 mb-8">
          <Button
            size="icon"
            className="bg-white text-black rounded-full hover:bg-gray-200 h-14 w-14"
            onClick={onPlayPause}
          >
            {isPlaying ? (
              <Pause className="h-6 w-6" fill="currentColor" />
            ) : (
              <Play className="h-6 w-6 ml-1" fill="currentColor" />
            )}
          </Button>
          <Button variant="ghost" size="icon" className="text-white/60 hover:text-white">
            <Download className="w-8 h-8" />
          </Button>
          <Button variant="ghost" size="icon" className="text-white/60 hover:text-white">
            <MoreHorizontal className="w-8 h-8" />
          </Button>
        </div>

        <div className="space-y-4">
          <div className="grid grid-cols-[auto_1fr_auto] gap-4 text-sm text-white/60 px-4 border-b border-white/10 pb-2">
            <span>#</span>
            <span>Título</span>
            <span>
              <Clock className="w-4 h-4" />
            </span>
          </div>
          {/* Aquí irían los items de la playlist */}
        </div>
      </div>
    </div>
  )
}

recuerda que para celular lo dejas con lo responsive que está, como quedaria entonces eso