import ScreenSelect from './ScreenSelect'
import video_btn from '../../videobtn.png'
import speaker_btn from '../../speakerbtn.png'
import mic_btn from '../../micbtn.png'
import videooff_btn from '../../videooffbtn.png'
import speakeroff_btn from '../../speakeroffbtn.png'
import micoff_btn from '../../micoffbtn.png'
const Controller = () => {
  return (
    <div className="container">
        <div className="row">
          <div
            className="col d-flex justify-content-center"
            style={{ backgroundColor: '#C4C4C4', position:'absolute', bottom:0 }}
          >
            {/* <div className="col d-flex justify-content-center"> 
            <button type="button" className="btn">
              <img src={mic_btn} width="45" height="40" />
            </button>
          </div> */}
            <div className="col d-flex justify-content-center">
              <button type="button" className="btn" onClick>
                <img src={micoff_btn} width="45" height="40" />
              </button>
            </div>
            <div className="col d-flex justify-content-center">
              <button type="button" className="btn">
                <img src={speakeroff_btn} width="45" />
              </button>
            </div>
            <div className="col d-flex justify-content-center">
              <button
                type="button"
                className="btn"
                data-bs-toggle="modal"
                data-bs-target="#exampleModal"
                src={video_btn}
                onClick="location.href='ScreenSelect.js'"
              >
                <img src={videooff_btn} width="45" />
              </button>
            </div>
          </div>
          <ScreenSelect />
        </div>
      </div>
  )
}

export default Controller