{# templates/components/product_card.html.twig #}
<div x-data="{ isAdding: false }" 
     class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition group"
     :data-product-id="{{ product.id }}">
    
    <!-- Product Image -->
    <div class="relative h-48 overflow-hidden">
        <img src="{{ product_image(product, 0) }}" 
             alt="{{ product.name }}"
             class="w-full h-full object-cover group-hover:scale-110 transition duration-500"
             loading="lazy">
        
        {% if product.compareAtPrice and product.compareAtPrice > product.price %}
            <span class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">
                -{{ ((product.compareAtPrice - product.price) / product.compareAtPrice * 100)|round }}%
            </span>
        {% endif %}
    </div>
    
    <!-- Product Info -->
    <div class="p-4">
        <div class="text-xs text-gray-500 mb-1">
            {{ product.vendor.storeName }}
        </div>
        
        <h3 class="font-semibold text-lg mb-2 line-clamp-2">
            <a href="{{ path('product_show', {id: product.id, slug: product.slug|default(product.name|slugify)}) }}" 
               class="hover:text-primary-600">
                {{ product.name }}
            </a>
        </h3>
        
        <div class="flex items-center mb-2">
            <div class="flex text-yellow-400">
                {% set rating = product.averageRating|default(0) %}
                {% for i in 1..5 %}
                    {% if i <= rating %}
                        <i class="fas fa-star text-sm"></i>
                    {% elseif i - 0.5 <= rating %}
                        <i class="fas fa-star-half-alt text-sm"></i>
                    {% else %}
                        <i class="far fa-star text-sm"></i>
                    {% endif %}
                {% endfor %}
            </div>
            <span class="text-xs text-gray-500 ml-1">({{ product.reviews|length }})</span>
        </div>
        
        <div class="flex items-center justify-between mt-3">
            <div>
                <span class="text-2xl font-bold text-primary-600">{{ product.price|number_format(2, ',', ' ') }} €</span>
                {% if product.compareAtPrice %}
                    <span class="text-sm text-gray-400 line-through ml-2">{{ product.compareAtPrice|number_format(2, ',', ' ') }} €</span>
                {% endif %}
            </div>
            
            {% if product.stock > 0 %}
                <button @click="isAdding = true; $dispatch('add-to-cart', { productId: {{ product.id }}, quantity: 1 }); setTimeout(() => isAdding = false, 500)"
                        :disabled="isAdding"
                        class="add-to-cart-btn bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
                    <i class="fas fa-cart-plus" x-show="!isAdding"></i>
                    <i class="fas fa-spinner fa-spin" x-show="isAdding" style="display: none;"></i>
                    <span x-show="!isAdding" class="ml-1">Ajouter</span>
                </button>
            {% else %}
                <button disabled class="bg-gray-300 text-gray-500 px-4 py-2 rounded-lg cursor-not-allowed">
                    <i class="fas fa-ban mr-1"></i> Rupture
                </button>
            {% endif %}
        </div>
    </div>
</div>