class AudioPlayer {
    constructor(options) {
        this.container = options.container;
        this.audio = new Audio(options.audioFile);
        this.isPlaying = false;

        this.playButton = null;
        this.pauseButton = null;

        this.render();
    }

    render() {
        const containerElement = document.querySelector(this.container);

        const audioPlayerElement = document.createElement('div');
        audioPlayerElement.id = 'audio-player';

        const audioControlsElement = document.createElement('div');
        audioControlsElement.id = 'audio-controls';

        this.playButton = document.createElement('button');
        this.playButton.innerHTML = '<i class="fa fa-play"></i>';
        this.playButton.addEventListener('click', () => {
            if (!this.isPlaying) {
                this.play();
            }
        });

        this.pauseButton = document.createElement('button');
        this.pauseButton.innerHTML = '<i class="fa fa-pause"></i>';
        this.pauseButton.addEventListener('click', () => {
            if (this.isPlaying) {
                this.pause();
            }
        });

        audioControlsElement.appendChild(this.playButton);
        audioControlsElement.appendChild(this.pauseButton);

        audioPlayerElement.appendChild(audioControlsElement);

       containerElement.appendChild(audioPlayerElement);
       this.pauseButton.style.display = 'none';
    }

    play() {
       if (!this.isPlaying) {
           this.audio.play();
           this.isPlaying = true;
           this.playButton.style.display = 'none';
           this.pauseButton.style.display = 'inline-block';
       }
    }

    pause() {
        if (this.isPlaying) {
            this.audio.pause();
            this.isPlaying = false;
            this.playButton.style.display = 'inline-block';
            this.pauseButton.style.display = 'none';
        }
    }
}