Music Player

import React, { useRef } from "react";
import { MusicPlayer, MusicPlayerRef } from "@/components/ui/music-player";

const demoTracks = [
    {
      src: "https://bato-web-agency.github.io/bato-shared/music/blinding-lights.mp3",
      title: "Blinding Lights",
      artist: "The Weekend",
      artwork: "https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=300&q=80",
    },
    {
      src: "https://bato-web-agency.github.io/bato-shared/music/call-out-my-name.mp3",
      title: "Call Out My Name",
      artist: "The Weekend",
      artwork: "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=300&q=80",
    },
  ];


export default function DemoOne() {
  const ref = React.useRef<MusicPlayerRef>(null);

  return (
    <div className="mx-auto max-w-xl p-4">
      <div className="mb-3 flex items-center gap-2">
        <button
          className="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm hover:bg-[hsl(var(--accent)/0.07)]"
          onClick={() => ref.current?.prev()}
        >
          Prev
        </button>
        <button
          className="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm hover:bg-[hsl(var(--accent)/0.07)]"
          onClick={() => ref.current?.toggle()}
        >
          Play/Pause
        </button>
        <button
          className="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm hover:bg-[hsl(var(--accent)/0.07)]"
          onClick={() => ref.current?.next()}
        >
          Next
        </button>
      </div>

      <MusicPlayer
        ref={ref}
        tracks={demoTracks}
        autoPlay={false}
        initialVolume={0.8}
        showPlaylist={true}
        keyboardShortcuts={true}
        waveform={{ enabled: false, replaceSeekBar: true, height: 76 }}
        controls={{ shuffle: true, repeat: true, volume: true, prevNext: true, time: true }}
      />
    </div>
  );
}