components/status-badge.js

class StatusBadge extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        const status = this.getAttribute('status') || '';
        const icon = this.getAttribute('icon') || '';
        
        this.shadowRoot.innerHTML = `
            <style>
                .badge {
                    display: inline-flex;
                    align-items: center;
                    padding: 0.25rem 0.5rem;
                    border-radius: 9999px;
                    font-size: 0.75rem;
                    line-height: 1rem;
                    font-weight: 500;
                }
                .approved {
                    background-color: #ECFDF5;
                    color: #059669;
                }
                .pending {
                    background-color: #FEF3C7;
                    color: #D97706;
                }
                .rejected {
                    background-color: #FEE2E2;
                    color: #DC2626;
                }
                .icon {
                    width: 0.75rem;
                    height: 0.75rem;
                    margin-right: 0.25rem;
                }
            </style>
            <span class="badge ${status}">
                ${icon ? `<i data-feather="${icon}" class="icon"></i>` : ''}
                ${this.getStatusText(status)}
            </span>
        `;
    }

    getStatusText(status) {
        switch(status) {
            case 'approved': return 'Approved';
            case 'pending': return 'Pending';
            case 'rejected': return 'Rejected';
            default: return status;
        }
    }
}

customElements.define('status-badge', StatusBadge);