@props(['product'])

<div class="card group">
    <a href="{{ route('products.show', $product) }}" class="block">
        <!-- Thumbnail -->
        <div class="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 overflow-hidden">
            @if($product->thumbnail_url)
                <img src="{{ $product->thumbnail_url }}"
                     alt="{{ $product->title }}"
                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
                     loading="lazy">
            @else
                <div class="w-full h-full flex items-center justify-center">
                    <svg class="h-16 w-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
            @endif
        </div>
    </a>

    <!-- Content -->
    <div class="p-4">
        <div class="flex items-start justify-between mb-2">
            <div class="flex-1 min-w-0">
                <a href="{{ route('products.show', $product) }}" class="group-hover:text-primary-600 transition-colors">
                    <h3 class="text-lg font-semibold text-gray-900 truncate">{{ $product->title }}</h3>
                </a>
            </div>

            <!-- Upvote Button Component -->
            @include('components.product.upvote-button', ['product' => $product])
        </div>

        <!-- Description -->
        <p class="text-sm text-gray-600 line-clamp-2 mb-3">
            {{ Str::limit($product->description, 100) }}
        </p>

        <!-- Meta Information -->
        <div class="flex items-center justify-between text-xs text-gray-500">
            <div class="flex items-center space-x-3">
                <!-- Category Badge -->
                <span class="badge bg-gray-100 text-gray-700">
                    {{ $product->category->name }}
                </span>

                <!-- Created At -->
                <span class="flex items-center">
                    <svg class="h-3.5 w-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    {{ $product->created_at->diffForHumans() }}
                </span>
            </div>

            <!-- User -->
            <a href="{{ route('profile.show', $product->user) }}" class="flex items-center space-x-1 hover:text-gray-900">
                <div class="h-5 w-5 rounded-full bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center text-white text-xs font-semibold">
                    {{ strtoupper(substr($product->user->name, 0, 1)) }}
                </div>
                <span class="text-xs">{{ $product->user->name }}</span>
            </a>
        </div>

        <!-- Action Buttons -->
        <div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between">
            <a href="{{ route('products.show', $product) }}"
               class="text-sm font-medium text-primary-600 hover:text-primary-700 flex items-center">
                View details
                <svg class="h-4 w-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </a>

            <!-- Bookmark Button -->
            @auth
                @include('components.product.bookmark-button', ['product' => $product])
            @endauth
        </div>
    </div>
</div>