import React from "react"

function userIcon(client) {
    if (client.muted) {
        return "🔇"
    }
    
    if (client.micMuted) {
        return "🎤"
    }
    
    return "👤"
}

function Channel(props) {
    return (
        <div className="channel">
            <div>
                ✅ {props.channel.name}
            </div>
            <div className="clients">
                {props.channel.clients.map(c =>{
                    return <div key={c.nickname} className="client">
                        {userIcon(c)} {c.nickname}
                    </div>
                })}
            </div>
            <div className="children">
                {props.channel.children.map(c => {
                    return <Channel channel={c} />
                })}
            </div>
        </div>
    )
}

export default Channel