import { LiveLogo } from './LiveLogo';

interface Props {
    accent: string;
    peerCount: number;
}

export const Brand = ({ accent, peerCount }: Props) => (
    <div className="brand">
        <LiveLogo className="brand-mark" accent={accent} size={28} />
        <div className="brand-name">SoftLAN</div>
        {peerCount > 0 && (
            <span
                className="brand-peers"
                title={`${peerCount} peer${peerCount === 1 ? '' : 's'} online`}
            >
                <span className="brand-peers-dot" />
                {peerCount}
            </span>
        )}
    </div>
);