class CustomCarCard extends HTMLElement {
    connectedCallback() {
        const title = this.getAttribute('title') || 'Classic Car';
        const price = this.getAttribute('price') || '0';
        const tokens = this.getAttribute('tokens') || '0';
        const image = this.getAttribute('image') || 'http://static.photos/automotive/640x360/99';
        const model = this.getAttribute('model') || '#';

        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .card {
                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                }
                .card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
                }
                .price-tag {
                    background: linear-gradient(135deg, #3b82f6, #6366f1);
                }
                .token-tag {
                    background: linear-gradient(135deg, #10b981, #059669);
                }
            </style>
            <a href="${model}" class="card block bg-white rounded-xl overflow-hidden shadow-md">
                <!-- Image/Model Preview -->
                <div class="relative h-48 bg-gray-100">
                    <img src="${image}" alt="${title}" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-10 transition"></div>
                </div>
                
                <!-- Content -->
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">${title}</h3>
                    
                    <div class="flex justify-between items-center">
                        <div>
                            <div class="price-tag text-white text-sm font-medium px-3 py-1 rounded-full inline-block">
                                $${price}
                            </div>
                            <div class="token-tag text-white text-sm font-medium px-3 py-1 rounded-full inline-block ml-2">
                                ${tokens} GTR
                            </div>
                        </div>
                            <div class="flex items-center">
                                <button class="text-blue-600 hover:text-blue-800 transition mr-2">
                                    <i data-feather="eye"></i>
                                </button>
                                <button class="text-green-600 hover:text-green-800 transition">
                                    <i data-feather="shopping-cart"></i>
                                </button>
                            </div>
</div>
                </div>
            </a>
        `;
    }
}

customElements.define('custom-car-card', CustomCarCard);