// eslint-disable-next-line
const preact = require('preact');

const { saw } = require('./shapes');

function pingColour(ping) {
    if (ping < 100) return 'forestgreen';
    if (ping < 200) return 'yellow';
    return 'red';
}

function renderHeader(args) {
    const { account, ping } = args;

    const accountStatus = account ?
        (<div className="header-status">
            <h1 className="header-username">{account.name}</h1>
            {saw(pingColour(ping))}
            <div className="ping-text">{ping}ms</div>
        </div>)
        : '';

    return (
        <header>
            <h1 className="header-title">
                cryps.gg
            </h1>
            {accountStatus}
        </header>
    );
}


module.exports = renderHeader;
