import React from 'react'
import { getClassName, getMergedClassNames, StyledComponent } from '../../common'
import zocksStyle from './ParticipantNotConnected.module.scss'

export const ParticipantNotConnected: React.FC<StyledComponent> = ({ styles }) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  return (
    <div className={getClassName('chat__participant-not-connected', mergedStyles)}>
      {'Please connect to a room in order to use the chat.'}
    </div>
  )
}
