import React from 'react';

import { withStyles } from '@material-ui/core';
import ChannelEntry from './ChannelEntry';

const styles = () => ({
  list: {
    listStyle: 'none',
  },
});

const ChannelList = ({ channels, clients, classes }) => {
  return (
    <div>
      <ul className={classes.list}>
        {channels.map(channel => (
          <li key={channel.id}>
            <ChannelEntry channel={channel} clients={clients} />
          </li>
        ))}
      </ul>
    </div>
  );
};

export default withStyles(styles)(ChannelList);