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;

y me sale este error:

Type 'number' is not assignable to type 'string'.ts(2322)