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

export default function BasicUsage() {
  return (
    <MusicPlayer
      theme="default"
      trackTitle="Blinding Lights"
      artist="The Weeknd"
      album="After Hours"
      artwork="/path/to/artwork.jpg"
    />
  );
}

export function CustomizedPlayer() {
  const handlePlayPause = (isPlaying) => {
    console.log(`Playback ${isPlaying ? "started" : "paused"}`);
  };
 
  const handleTimeChange = (currentTime) => {
    console.log(`Current playback position: ${currentTime}s`);
  };
 
  return (
    <MusicPlayer
      theme="spotify"
      trackTitle="Sugar"
      artist="Maroon 5"
      album="V"
      artwork="/path/to/artwork.jpg"
      initialTime={30}
      totalDuration={240}
      controls={{
        shuffle: true,
        repeat: true,
        heart: false,
      }}
      onPlayPause={handlePlayPause}
      onTimeChange={handleTimeChange}
      onTrackEnd={() => console.log("Track finished playing")}
      className="rounded-xl shadow-lg"
    />
  );
}