import React from 'react';
import { Box, CircularProgress, Typography } from '@mui/material';

interface WebRTCStatusProps {
  isNegotiating: boolean;
  connectionState?: string;
}

const WebRTCStatus: React.FC<WebRTCStatusProps> = ({
  isNegotiating,
  connectionState
}) => {
  if (!isNegotiating && connectionState !== 'connecting') {
    return null;
  }

  return (
    <Box 
      className="webrtc-status"
      sx={{
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        color: 'white',
        padding: 2,
        borderRadius: 2,
        zIndex: 10
      }}
    >
      <CircularProgress size={24} color="inherit" />
      <Typography variant="caption">
        {isNegotiating ? 'Negotiating WebRTC...' : 'Connecting...'}
      </Typography>
    </Box>
  );
};

export default WebRTCStatus;