class ProgressCard extends HTMLElement {
    connectedCallback() {
        const title = this.getAttribute('title') || '';
        const value = this.getAttribute('value') || '0';
        const icon = this.getAttribute('icon') || 'activity';
        const color = this.getAttribute('color') || 'bg-indigo-500';
        
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .card {
                    background: white;
                    border-radius: 12px;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                    transition: all 0.3s ease;
                }
                
                .card:hover {
                    transform: translateY(-4px);
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
                }
                
                .icon-container {
                    width: 48px;
                    height: 48px;
                }
            </style>
            <div class="card p-6 h-full">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-lg font-bold text-gray-800">${title}</h3>
                    <div class="icon-container ${color} rounded-full flex items-center justify-center text-white">
                        <i data-feather="${icon}"></i>
                    </div>
                </div>
                <div class="text-3xl font-bold text-gray-900 mb-2">${value}</div>
                <slot></slot>
            </div>
        `;
    }
}

customElements.define('progress-card', ProgressCard);