class CustomCreatorCard extends HTMLElement {
    connectedCallback() {
        const name = this.getAttribute('name') || 'Creator Name';
        const category = this.getAttribute('category') || 'Category';
        const skills = this.getAttribute('skills') || 'Skills not specified';
        const image = this.getAttribute('image') || 'http://static.photos/people/640x360/10';
        const rating = parseFloat(this.getAttribute('rating')) || 0;
        
        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 -5px rgba(0, 0, 0, 0.1);
                }
                .rating-star {
                    position: relative;
                    display: inline-block;
                }
                .rating-star .empty {
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            </style>
            <div class="card bg-white rounded-lg overflow-hidden shadow-sm border border-gray-100">
                <div class="relative h-48 overflow-hidden">
                    <img src="${image}" alt="${name}" class="w-full h-full object-cover">
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                        <h3 class="text-white font-bold text-lg">${name}</h3>
                        <span class="text-primary-100 text-sm">${category}</span>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center space-x-1">
                            ${this.renderStars(rating)}
                            <span class="text-sm text-gray-600">${rating.toFixed(1)}</span>
                        </div>
                        <span class="text-xs bg-primary-100 text-primary-800 px-2 py-1 rounded-full">DFW</span>
                    </div>
                    <p class="text-gray-600 text-sm mb-4">${skills}</p>
                    <div class="flex justify-between items-center">
                        <button class="text-primary-500 hover:text-primary-600 text-sm font-medium flex items-center">
                            <i data-feather="message-square" class="w-4 h-4 mr-1"></i>
                            Contact
                        </button>
                        <a href="/creator/${name.toLowerCase().replace(/ /g, '-')}" class="text-sm text-gray-500 hover:text-primary-500">View profile</a>
                    </div>
                </div>
            </div>
        `;
        
        setTimeout(() => {
            feather.replace();
        }, 0);
    }
    
    renderStars(rating) {
        let stars = '';
        for (let i = 1; i <= 5; i++) {
            if (i <= Math.floor(rating)) {
                stars += '<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>';
            } else if (i - 0.5 <= rating) {
                stars += '<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current half-star"></i>';
            } else {
                stars += '<i data-feather="star" class="w-4 h-4 text-gray-300"></i>';
            }
        }
        return stars;
    }
}
customElements.define('custom-creator-card', CustomCreatorCard);