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} />
        {/* Two-tone wordmark per design/logo/INTEGRATION.md: "Soft" in --t-1,
            "LAN" always in the accent. */}
        <div className="brand-name">
            Soft<span className="brand-name-lan">LAN</span>
        </div>
        {peerCount > 0 && (
            <span
                className="brand-peers"
                title={`${peerCount} peer${peerCount === 1 ? '' : 's'} online`}
            >
                <span className="brand-peers-dot" />
                {peerCount}
            </span>
        )}
    </div>
);