import React, { Component } from 'react';
import './ChannelView.scss';

export default class ChannelView extends Component<ChannelViewProps> {
  render() {
    const { channel } = this.props;
    return (
      <div className='channel-view'>
        <h2>{channel.name}</h2>
        <ul>
          <li>
            <span>#{channel.id} </span>
            {channel.name}
          </li>
          {channel.totalClients >= 0 && (
            <li>
              <span>Users online</span> {channel.totalClients}
            </li>
          )}
          {channel.subchannels.length > 0 && (
            <li>
              <span>Subchannels:</span>
            </li>
          )}
        </ul>
      </div>
    );
  }
}