'use client' // (REQUIRED)
import dynamic from 'next/dynamic'
import '@clxrity/react-audio/index.css' // (optional) import the styles

/**
 * You can also import the CSS within your `globals.css` or `index.css` file like so:
 * ```css
 * @import "@clxrity/react-audio/index.css";
 * ```
 */

const Player = dynamic(
    () => import('@clxrity/react-audio').then((mod) => mod.Player),
    { ssr: false }
)

export default function Component() {
    const track = {
        src: '/loop.wav', // (REQUIRED) audio file path (public/loop.wav)
        title: 'Loop',
        artist: {
            name: 'Clxrity',
            url: 'https://wav.clxrity.xyz',
        },
    }

    return <Player track={track} showTrackInfo={true} />
}