import React from "react";

import Controls from "../controls/Controls";
import Visualizer from "../visualizer/Visualizer";
import { musicPlayer } from "./musicPlayerSlice";

function MusicPlayer() {
    return (
        <div className="is-flex-grow-1 is-flex is-flex-direction-column">
            <div className="is-flex-grow-1 is-overflow-hidden">
                <Visualizer
                    audioContext={musicPlayer.audioContext}
                    audioNode={musicPlayer.audioNode}
                />
            </div>
            <div className="is-flex-grow-0">
                <Controls />
            </div>
        </div>
    );
}

export default MusicPlayer;