components/post-card.js

class CustomPostCard extends HTMLElement {
    static get observedAttributes() {
        return ['post'];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'post') {
            this.render();
        }
    }

    connectedCallback() {
        this.render();
    }

    render() {
        const post = this.getAttribute('post') ? JSON.parse(this.getAttribute('post')) : {};
        
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .post-card {
                    background-color: white;
                    border-radius: 12px;
                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                    overflow: hidden;
                }
                .status-badge {
                    font-size: 0.75rem;
                    padding: 0.25rem 0.5rem;
                    border-radius: 9999px;
                }
                .unanswered-badge {
                    background-color: #fef3c7;
                    color: #92400e;
                }
                .answered-badge {
                    background-color: #d1fae5;
                    color: #065f46;
                }
                .tag {
                    font-size: 0.75rem;
                    padding: 0.25rem 0.5rem;
                    border-radius: 9999px;
                    background-color: #e0e7ff;
                    color: #4f46e5;
                }
            </style>
            <div class="post-card ${post.status === 'unanswered' ? 'unanswered-post' : 'answered-post'} h-full flex flex-col">
                <div class="p-5 flex-1">
                    <div class="flex justify-between items-start mb-2">
                        <h3 class="font-medium text-lg line-clamp-2">${post.title}</h3>
                        <span class="status-badge ${post.status === 'unanswered' ? 'unanswered-badge' : 'answered-badge'} flex items-center">
                            <i data-feather="${post.status === 'unanswered' ? 'help-circle' : 'check-circle'}" class="w-3 h-3 mr-1"></i>
                            ${post.status === 'unanswered' ? 'Needs help' : 'Answered'}
                        </span>
                    </div>
                    
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">${post.content}</p>
                    
                    <div class="flex flex-wrap gap-2 mb-4">
                        ${post.tags.map(tag => `
                            <span class="tag">${tag}</span>
                        `).join('')}
                    </div>
                    
                    <div class="mb-4">
                        <div class="flex justify-between text-xs text-gray-500 mb-1">
                            <span>Confidence level</span>
                            <span>${post.confidence}%</span>
                        </div>
                        <div class="relative">
                            <div class="confidence-meter w-full"></div>
                            <div class="confidence-indicator" style="left: ${post.confidence}%; background-color: ${
                                post.confidence < 30 ? '#ef4444' : 
                                post.confidence < 70 ? '#f59e0b' : '#10b981'
                            }"></div>
                        </div>
                    </div>
                </div>
                
                <div class="px-5 py-3 border-t border-gray-100 bg-gray-50 flex justify-between items-center">
                    <div class="flex items-center space-x-4 text-sm">
                        <span class="text-gray-500 flex items-center">
                            <i data-feather="message-square" class="w-4 h-4 mr-1"></i>
                            ${post.responses} ${post.responses === 1 ? 'response' : 'responses'}
                        </span>
                        <span class="text-gray-500 flex items-center">
                            <i data-feather="thumbs-up" class="w-4 h-4 mr-1"></i>
                            ${post.upvotes}
                        </span>
                    </div>
                    <div class="text-xs text-gray-500">
                        ${post.time} • ${post.author}
                    </div>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-post-card', CustomPostCard);