---
interface Props {
  product: {
    id: string;
    name: string;
    slug: string;
    price: number;
    compare_at_price?: number;
    images?: string[];
    inventory?: number;
    track_inventory?: boolean;
    category?: { name: string; slug: string };
    vendor?: { store_name: string };
    avgRating?: number;
    reviewCount?: number;
  };
}

const { product } = Astro.props;
const discount = product.compare_at_price && product.compare_at_price > product.price
  ? Math.round((1 - product.price / product.compare_at_price) * 100)
  : 0;
const image = product.images?.[0] || 'https://via.placeholder.com/300x300?text=No+Image';
---

<article class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition-shadow group">
  <a href={`/products/${product.slug}`} class="block">
    <div class="aspect-square overflow-hidden bg-gray-100 relative">
      <img
        src={image}
        alt={product.name}
        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
        loading="lazy"
      />
      {discount > 0 && (
        <span class="absolute top-3 left-3 bg-red-500 text-white px-2 py-1 rounded text-xs font-medium">
          ลด {discount}%
        </span>
      )}
      {(!product.track_inventory || (product.inventory ?? 0) > 5) && (
        <span class="absolute top-3 right-3 bg-green-500 text-white px-2 py-1 rounded text-xs">
          มีสินค้า
        </span>
      )}
    </div>
    
    <div class="p-4">
      {product.category && (
        <p class="text-xs text-gray-500 mb-1">{product.category.name}</p>
      )}
      <h3 class="font-medium text-gray-900 line-clamp-2 mb-2">
        {product.name}
      </h3>
      
      <div class="flex items-center gap-2 mb-2">
        {product.avgRating && (
          <div class="flex items-center gap-1">
            {[...Array(5)].map((_, i) => (
              <svg
                class={`w-3 h-3 ${i < Math.round(product.avgRating) ? 'text-yellow-400' : 'text-gray-300'}`}
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
            ))}
            <span class="text-xs text-gray-500">({product.reviewCount || 0})</span>
          </div>
        )}
      </div>
      
      <div class="flex items-center justify-between">
        <div>
          <span class="text-lg font-bold text-blue-600">
            ฿{product.price.toLocaleString()}
          </span>
          {product.compare_at_price && product.compare_at_price > product.price && (
            <span class="text-sm text-gray-400 line-through ml-2">
              ฿{product.compare_at_price.toLocaleString()}
            </span>
          )}
        </div>
      </div>
      
      {product.vendor && (
        <p class="text-xs text-gray-500 mt-2">
          โดย {product.vendor.store_name}
        </p>
      )}
    </div>
  </a>
</article>

<style>
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>
