class CustomTabGroup extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    font-family: 'Inter', sans-serif;
                }
                
                .tab-header {
                    display: flex;
                    border-bottom: 1px solid #374151;
                }
                
                .tab-btn {
                    padding: 0.5rem 1rem;
                    cursor: pointer;
                    color: #9ca3af;
                    font-weight: 500;
                    border: none;
                    background: transparent;
                    display: flex;
                    align-items: center;
                    transition: all 0.2s ease;
                }
                
                .tab-btn:hover {
                    color: #6366f1;
                }
                
                .tab-btn.active {
                    color: #6366f1;
                    border-bottom: 2px solid #6366f1;
                }
                
                .tab-content {
                    display: none;
                    padding: 1rem;
                }
                
                .tab-content.active {
                    display: block;
                }
            </style>
            
            <div class="tab-group">
                <div class="tab-header">
                    <slot name="tabs"></slot>
                </div>
                <div class="tab-contents">
                    <slot name="contents"></slot>
                </div>
            </div>
        `;
        
        // Add click handlers for tabs
        setTimeout(() => {
            const tabs = this.shadowRoot.querySelectorAll('slot[name="tabs"]').item(0).assignedElements();
            const contents = this.shadowRoot.querySelectorAll('slot[name="contents"]').item(0).assignedElements();
            
            tabs.forEach((tab, index) => {
                tab.addEventListener('click', () => {
                    // Remove active class from all tabs and contents
                    tabs.forEach(t => t.classList.remove('active'));
                    contents.forEach(c => c.classList.remove('active'));
                    
                    // Add active class to clicked tab and corresponding content
                    tab.classList.add('active');
                    if (contents[index]) {
                        contents[index].classList.add('active');
                    }
                });
                
                // Set first tab as active by default
                if (index === 0) {
                    tab.classList.add('active');
                    if (contents[0]) {
                        contents[0].classList.add('active');
                    }
                }
            });
        });
    }
}

customElements.define('custom-tab-group', CustomTabGroup);