class CustomThreadCard extends HTMLElement {
    static get observedAttributes() {
        return ['title', 'author', 'date', 'comments', 'likes', 'tags', 'category'];
    }

    connectedCallback() {
        this.render();
    }

    attributeChangedCallback() {
        this.render();
    }

    render() {
        const title = this.getAttribute('title') || 'Untitled Thread';
        const author = this.getAttribute('author') || 'Anonymous';
        const date = this.getAttribute('date') || 'Just now';
        const comments = this.getAttribute('comments') || '0';
        const likes = this.getAttribute('likes') || '0';
        const tags = this.getAttribute('tags') || '';
        const category = this.getAttribute('category') || 'General';

        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .card {
                    transition: transform 0.2s, box-shadow 0.2s;
                }
                .card:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
                }
                .tag {
                    transition: background-color 0.2s;
                }
                .tag:hover {
                    background-color: #e0e7ff;
                }
                .category-badge {
                    position: absolute;
                    top: -10px;
                    right: 10px;
                }
            </style>
            <div class="card bg-white rounded-lg shadow p-4 relative">
                <div class="category-badge bg-indigo-600 text-white text-xs px-2 py-1 rounded-full">
                    ${category}
                </div>
                
                <h3 class="text-lg font-semibold mb-2">${title}</h3>
                
                <div class="flex items-center text-sm text-gray-500 mb-3">
                    <span>Posted by <span class="font-medium">${author}</span></span>
                    <span class="mx-2">•</span>
                    <span>${date}</span>
                </div>
                
                <div class="flex flex-wrap gap-2 mb-4">
                    ${tags.split(',').map(tag => `
                        <span class="tag bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">${tag.trim()}</span>
                    `).join('')}
                </div>
                
                <div class="flex justify-between items-center">
                    <div class="flex space-x-4">
                        <div class="flex items-center text-gray-500 text-sm">
                            <i data-feather="message-square" class="mr-1 w-4 h-4"></i>
                            ${comments} comments
                        </div>
                        <div class="flex items-center text-gray-500 text-sm">
                            <i data-feather="thumbs-up" class="mr-1 w-4 h-4"></i>
                            ${likes} likes
                        </div>
                    </div>
                    
                    <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">
                        <i data-feather="chevron-right" class="mr-1 w-4 h-4"></i>
                        View Thread
                    </button>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-thread-card', CustomThreadCard);