import { MusicPlayer } from "@/components/ui/music-player";
import type { Track } from "@/components/ui/music-player";

const sampleTrack: Track = {
  id: "1",
  title: "Blinding Lights",
  artist: "The Weeknd",
  album: "After Hours",
  artwork: "/path/to/artwork.jpg",
  duration: 200,
  url: "/path/to/audio.mp3"
};
 
export default function BasicUsage() {
  return (
    <MusicPlayer
      theme="default"
      currentTrack={sampleTrack}
    />
  );
}

export function AdvancedPlayer() {
  const playlist: Track[] = [
    {
      id: "1",
      title: "Sugar",
      artist: "Maroon 5",
      album: "V",
      artwork: "/path/to/artwork1.jpg",
      duration: 240,
      url: "/path/to/audio1.mp3"
    },
    {
      id: "2",
      title: "Payphone",
      artist: "Maroon 5",
      album: "Overexposed",
      artwork: "/path/to/artwork2.jpg",
      duration: 210,
      url: "/path/to/audio2.mp3"
    }
  ];
 
  const [currentIndex, setCurrentIndex] = useState(0);
 
  const handlePlayPause = (isPlaying: boolean) => {
    console.log(`Playback ${isPlaying ? "started" : "paused"}`);
  };
 
  const handleTimeChange = (currentTime: number) => {
    console.log(`Current playback position: ${currentTime}s`);
  };
 
  const handleTrackChange = (track: Track, index: number) => {
    setCurrentIndex(index);
    console.log(`Changed to track: ${track.title}`);
  };
 
  const handleVolumeChange = (volume: number) => {
    console.log(`Volume changed to: ${volume}%`);
  };
 
  return (
    <MusicPlayer
      theme="spotify"
      currentTrack={playlist[currentIndex]}
      queue={playlist}
      currentIndex={currentIndex}
      initialTime={30}
      autoPlay={false}
      showEqualizer={true}
      onPlayPause={handlePlayPause}
      onTimeChange={handleTimeChange}
      onTrackEnd={() => console.log("Track finished playing")}
      onTrackChange={handleTrackChange}
      onVolumeChange={handleVolumeChange}
      className="rounded-xl shadow-lg"
    />
  );
}

interface Track {
  id: string;           
  title: string;        
  artist: string;     
  album: string;     
  artwork: string; 
  duration: number;  
  url?: string;      
}