class StatusIndicator extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .status-container {
                    display: flex;
                    align-items: center;
                    font-size: 0.75rem;
                    padding: 0.25rem 0.5rem;
                    border-radius: 9999px;
                    background: rgba(20, 20, 30, 0.6);
                    backdrop-filter: blur(16px);
                }
                .status-dot {
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    margin-right: 0.25rem;
                    animation: pulse 2s infinite;
                }
                .online {
                    color: #06b6d4;
                }
                .offline {
                    color: #f43f5e;
                }
                @keyframes pulse {
                    0% { opacity: 1; }
                    50% { opacity: 0.4; }
                    100% { opacity: 1; }
                }
            </style>
            <div class="status-container">
                <div class="status-dot online"></div>
                <span class="status-text">SYNCED</span>
            </div>
        `;
    }

    setStatus(connected) {
        const dot = this.shadowRoot.querySelector('.status-dot');
        const text = this.shadowRoot.querySelector('.status-text');
        
        if (connected) {
            dot.classList.remove('offline');
            dot.classList.add('online');
            text.textContent = 'SYNCED';
        } else {
            dot.classList.remove('online');
            dot.classList.add('offline');
            text.textContent = 'OFFLINE';
        }
    }
}

customElements.define('status-indicator', StatusIndicator);