Controller.js

import ScreenSelect from "./ScreenSelect";
import video_btn from "../../images/videobtn.png";
import speaker_btn from "../../images/speakerbtn.png";
import mic_btn from "../../images/micbtn.png";
import videooff_btn from "../../images/videooffbtn.png";
import speakeroff_btn from "../../images/speakeroffbtn.png";
import micoff_btn from "../../images/micoffbtn.png";
import React, { useState } from "react";

const Controller = (props) => {
  console.log(props);
  const { mic, video, speaker, micClick, speakerClick, videoClick } = props;
  return (
    <div className="container">
      <div className="row">
        <div
          className="col d-flex justify-content-center"
          style={{
            backgroundColor: "#C4C4C4",
            position: "absolute",
            bottom: 0,
            width: "414px",
          }}
        >
          {mic ? (
            <div className="col d-flex justify-content-center">
              <button type="button" className="btn" onClick={micClick}>
                <img src={mic_btn} width="45" height="40" />
              </button>
            </div>
          ) : (
            <div className="col d-flex justify-content-center">
              <button type="button" className="btn" onClick={micClick}>
                <img src={micoff_btn} width="45" height="40" />
              </button>
            </div>
          )}
          {speaker ? (
            <div className="col d-flex justify-content-center">
              <button type="button" className="btn" onClick={speakerClick}>
                <img src={speaker_btn} width="45" />
              </button>
            </div>
          ) : (
            <div className="col d-flex justify-content-center">
              <button type="button" className="btn" onClick={speakerClick}>
                <img src={speakeroff_btn} width="45" />
              </button>
            </div>
          )}
          {video ? (
            <div className="col d-flex justify-content-center">
              <button
                type="button"
                className="btn"
                data-bs-toggle="modal"
                data-bs-target="#shareModal"
                onClick={videoClick}
              >
                <img src={video_btn} width="45" />
              </button>
            </div>
          ) : (
            <div className="col d-flex justify-content-center">
              <button type="button" className="btn" onClick={videoClick}>
                <img src={videooff_btn} width="45" />
              </button>
            </div>
          )}
        </div>
        {/* <ScreenSelect videoOff={setVideo} /> */}
      </div>
    </div>
  );
};

export default Controller;