class StatsDisplay extends HTMLElement {
    static get observedAttributes() {
        return ['money', 'population', 'nickname'];
    }
    
    connectedCallback() {
        this.render();
    }
    
    attributeChangedCallback() {
        this.render();
    }
    
    render() {
        const money = this.getAttribute('money') || '0';
        const population = this.getAttribute('population') || '0';
        const nickname = this.getAttribute('nickname') || 'Player';
        
        const formattedMoney = parseInt(money).toLocaleString();
        
        this.innerHTML = `
            <div style="font-size: 14px;">
                <div style="font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #FFD700;">
                    ${nickname}
                </div>
                <div style="margin-bottom: 5px;">
                    <span style="color: #90EE90;">$</span> ${formattedMoney}
                </div>
                <div>
                    <span style="color: #87CEEB;">👥</span> ${population}
                </div>
            </div>
        `;
    }
}

customElements.define('stats-display', StatsDisplay);