class CustomProgressTracker extends HTMLElement {
    connectedCallback() {
        const currentStep = this.getAttribute('current-step') || '1';
        
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .step {
                    width: 2.5rem;
                    height: 2.5rem;
                }
                .step.active {
                    background-color: #f59e0b;
                    color: white;
                }
                .step.inactive {
                    background-color: #e5e7eb;
                    color: #6b7280;
                }
                .connector {
                    height: 2px;
                    background-color: #e5e7eb;
                }
                .connector.active {
                    background-color: #f59e0b;
                }
            </style>
            <div class="flex items-center justify-center mb-12">
                <div class="flex items-center">
                    <!-- Step 1 -->
                    <div class="step rounded-full flex items-center justify-center font-medium ${currentStep === '1' ? 'active' : 'inactive'}">
                        1
                    </div>
                    <div class="connector w-16 mx-2 ${currentStep >= '2' ? 'active' : ''}"></div>
                    
                    <!-- Step 2 -->
                    <div class="step rounded-full flex items-center justify-center font-medium ${currentStep === '2' ? 'active' : currentStep > '2' ? 'active' : 'inactive'}">
                        2
                    </div>
                    <div class="connector w-16 mx-2 ${currentStep >= '3' ? 'active' : ''}"></div>
                    
                    <!-- Step 3 -->
                    <div class="step rounded-full flex items-center justify-center font-medium ${currentStep === '3' ? 'active' : currentStep > '3' ? 'active' : 'inactive'}">
                        3
                    </div>
                    <div class="connector w-16 mx-2 ${currentStep >= '4' ? 'active' : ''}"></div>
                    
                    <!-- Step 4 -->
                    <div class="step rounded-full flex items-center justify-center font-medium ${currentStep === '4' ? 'active' : currentStep > '4' ? 'active' : 'inactive'}">
                        4
                    </div>
                    <div class="connector w-16 mx-2 ${currentStep >= '5' ? 'active' : ''}"></div>
                    
                    <!-- Step 5 -->
                    <div class="step rounded-full flex items-center justify-center font-medium ${currentStep === '5' ? 'active' : currentStep > '5' ? 'active' : 'inactive'}">
                        5
                    </div>
                    <div class="connector w-16 mx-2 ${currentStep >= '6' ? 'active' : ''}"></div>
                    
                    <!-- Step 6 -->
                    <div class="step rounded-full flex items-center justify-center font-medium ${currentStep === '6' ? 'active' : 'inactive'}">
                        6
                    </div>
                </div>
            </div>
        `;
    }
}

customElements.define('custom-progress-tracker', CustomProgressTracker);