import React from 'react';
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
import './StreamStatus.scss';

interface StreamStatusProps {
  ready: boolean;
}

const StreamStatus: React.FC<StreamStatusProps> = ({ ready }) => {
  return (
    <div className="stream-status d-flex align-items-center gap-2">
      <span className="stream-status__text">
        {ready ? 'Connected' : 'Connecting'}
      </span>
      <FiberManualRecordIcon
        className={`stream-status__dot ${ready ? 'is-ready' : 'is-connecting'}`}
      />
    </div>
  );
};

export default StreamStatus;
