import clsx from "clsx";
import Icon from "../icon/Icon";
import { emit } from "process";

interface MediaControlProps {
  calling?: boolean;
  micOn?: boolean;
  cameraOn?: boolean;
  setMic?: () => void;
  setCamera?: () => void;
  setCalling?: () => void;
  
}
/* Camera and Microphone Controls */

const MediaControl = ({
  calling,
  micOn,
  cameraOn,
  setMic,
  setCamera,
  setCalling,
}: MediaControlProps) => {


  return (
    <>
      <div
        className="inset-0 top-a mb-3 bg-dark fle-width-350 mx-auto d-flex p-3 justify-content-around align-items-center"
        style={{borderRadius: '25%'}}
      >
        <div className="d-flex h-full align-items-center gap-3">
          
          {setMic && (
            <Icon className="mx-3"
              icon={!micOn ? 'MicOff' : 'Mic'}
              color={!micOn ? 'danger' : 'light'} size='3x'
              onClick={() => setMic()}
            />
          )}
          {setCamera && (
            <Icon className="mx-3"
              icon={!cameraOn ? 'VideocamOff' : 'Videocam'}
              color={!cameraOn ? 'danger' : 'success'} size='3x'
              onClick={() => setCamera()}
            />
          )}
        </div>
        {setCalling && (
          <Icon className="mx-3"
            icon={!calling ? 'Call' : 'CallEnd'}
            color={!calling ? 'success' : 'danger'} size='3x'
            onClick={() => setCalling()}
          />
        )}
      </div>
    </>
  );
}

MediaControl.defaultProps = {
	calling: undefined,
  micOn: undefined,
  cameraOn: undefined,
  setMic: undefined,
  setCamera: undefined,
  setCalling: undefined,
};

export default MediaControl;