import { Button } from 'antd';
import { MicOffIcon, MicOnIcon, CameraOnIcon, CameraOffIcon, PhoneIcon } from '../icons';

interface MediaControlProps {
    calling: boolean;
    micOn: boolean;
    cameraOn: boolean;
    setMic: () => void;
    setCamera: () => void;
    setCalling: () => void;
}

export const MediaControl = ({
    calling,
    micOn,
    cameraOn,
    setMic,
    setCamera,
    setCalling,
}: MediaControlProps) => (
    <div className="b-agora__controls">
        <Button
            className="b-agora__control"
            type="primary"
            shape="circle"
            icon={micOn ? <MicOnIcon style={{ fontSize: 24, color: '#66A5AD' }} /> : <MicOffIcon style={{ fontSize: 24, color: '#fff' }} />}
            danger={!micOn}
            size="medium"
            onClick={setMic}
        />
        <Button
            className="b-agora__control_big"
            type="primary"
            shape="circle"
            icon={<PhoneIcon style={{ fontSize: 36, color: calling ? '#fff' : '#66A5AD' }} />}
            danger={calling}
            onClick={setCalling}
        />
        <Button
            className="b-agora__control"
            type="primary"
            shape="circle"
            icon={cameraOn ? <CameraOnIcon style={{ fontSize: 24, color: '#66A5AD' }} /> : <CameraOffIcon style={{ fontSize: 24, color: '#fff' }} />}
            danger={!cameraOn}
            size="medium"
            onClick={setCamera}
        />
    </div>
);
