// Product card — used by homepage featured strip, category page, related strip.
// Image slot up top (1:1), name + brand + price below.

(function () {
  window.ProductCard = function ProductCard({ product, compact = false }) {
    const p = product;
    const stockClass = p.stock === 'Low stock' ? 'is-low' : (p.stock === 'Out of stock' ? 'is-out' : 'is-in');
    return (
      <a className={`product-card ${compact ? 'is-compact' : ''}`} href={`#/p/${p.sku}`}>
        <div className="product-card-image">
          <div className="img-slot" data-slot={`product-${p.sku}`} data-default-src={p.image || ''}>
            <div className="img-slot-empty" aria-hidden="true">
              <span className="img-slot-mark">najmat<i className="img-slot-mark-dot" /></span>
            </div>
          </div>
          <span className={`product-card-stock ${stockClass}`}>{p.stock}</span>
        </div>
        <div className="product-card-body">
          <div className="product-card-brand label-mono">{p.brand}</div>
          <div className="product-card-name">{p.name}</div>
          <div className="product-card-meta">
            {p.price != null
              ? <span className="product-card-price tnum">aed {p.price.toFixed(2)}</span>
              : <span className="product-card-price product-card-price-ask">Ask for price</span>}
            <span className="product-card-pack label-mono">{p.pack}</span>
          </div>
        </div>
      </a>
    );
  };
})();