import {useState, React} from "react";
import jQuery from "jquery";
import Play from '@mui/icons-material/PlayArrow';
import Pause from '@mui/icons-material/Pause';
<style>
  @import "@styles/player.css";
</style>

export const render = false;

const PlayIcon = () => {
    return (
        <Play />
    );
}

const PauseIcon = () => {
    return (
        <Pause />
    )
}

export function Player() {
    const [isPlaying, setPlaying] = useState(false);
    window.isPlaying = isPlaying;
  return (
    <div>
    <div className="c-containter">
        <div className="music-container">
            <section className="album-cover">
                
                <img src="https://api.codey.lol/radio/album_art" className="cover" alt="Cover Art" />
                
            </section>
            <section className="music-player">
                <h1 className='music-player__header'>serious.FM</h1>
                <h1 className="music-player__title"></h1>
                <h2 className="music-player__author"></h2>
                <h2 className="music-player__genre"></h2>
                <div className="music-time">
                    <p className="music-time__current"></p>
                    <p className="music-time__last"></p>
                </div>
                <div className="music-bar" id="progress">
                    <div id="length"></div>
                </div>
                <div className="music-control">
                    <div className="music-control__play" id="play">
                        {isPlaying == false && (<Play onClick={(e) => { setPlaying(!isPlaying); togglePlayback(); } } />)}
                        {isPlaying && (<Pause onClick={(e) => { setPlaying(!isPlaying); togglePlayback(); }} />)}
                    </div>
                </div>
            </section>
        </div>
    </div>
    </div>
  )};