import React from 'react';
import {
  IconMicrophone,
  IconMicrophoneOff,
  IconPhoneOff,
  IconVideo,
  IconVideoOff,
} from '@tabler/icons-react-native';

import ToggleButton from './components/ToggleButton';

interface Props {
  isReady: boolean;
  isVideoCall: boolean;
  onFinishCall: () => void;
  onToggleCamera: () => void;
}

function CallFooter({
  isReady,
  isVideoCall,
  onFinishCall,
  onToggleCamera,
}: Props) {
  return (
    <>
      <ToggleButton
        disabled={!isReady}
        IconActive={IconMicrophone}
        IconInactive={IconMicrophoneOff}
      />
      {isVideoCall && (
        <ToggleButton
          initialState
          disabled={!isReady}
          IconActive={IconVideo}
          IconInactive={IconVideoOff}
          onPress={onToggleCamera}
        />
      )}
      <ToggleButton
        IconActive={IconPhoneOff}
        IconInactive={IconPhoneOff}
        onPress={onFinishCall}
      />
    </>
  );
}

export default CallFooter;