{% doc %}
  Product Card Snippet Template

  @param product - {Object} Product object (required)
  @param show_vendor - {Boolean} Display vendor name (default: false)
  @param show_quick_add - {Boolean} Show quick add button (default: false)
  @param image_ratio - {String} Image aspect ratio (default: 'adapt')
  @param card_class - {String} Additional CSS classes

  @example
  {% render 'product-card',
       product: product,
       show_vendor: true,
       image_ratio: 'square'
    %}
{% enddoc %}

{% liquid
  # Parameter validation and defaults
  assign product = product | default: empty
  assign show_vendor = show_vendor | default: false
  assign show_quick_add = show_quick_add | default: false
  assign image_ratio = image_ratio | default: 'adapt'
  assign card_class = card_class | default: ''

  # Early return if required parameters missing
  unless product != empty
    echo '<!-- Error: product parameter required for product-card snippet -->'
    break
  endunless

  # Build CSS classes
  assign card_classes = 'product-card'
  if card_class != blank
    assign card_classes = card_classes | append: ' ' | append: card_class
  endif
  if image_ratio != 'adapt'
    assign card_classes = card_classes | append: ' product-card--' | append: image_ratio
  endif
%}

<div
  class="{{ card_classes }}"
  data-product-id="{{ product.id }}"
>
  <div class="product-card__media">
    {% if product.featured_image %}
      <a
        href="{{ product.url }}"
        class="product-card__link"
      >
        {{
          product.featured_image
          | image_url: width: 800
          | image_tag: alt: product.featured_image.alt
          | default: product.title, loading: 'lazy', class: 'product-card__image'
        }}
      </a>
    {% else %}
      <div class="product-card__placeholder">
        {{ 'product-1' | placeholder_svg_tag: 'product-card__placeholder-svg' }}
      </div>
    {% endif %}
  </div>

  <div class="product-card__info">
    <h3 class="product-card__title">
      <a href="{{ product.url }}">{{ product.title | escape }}</a>
    </h3>

    {% if show_vendor and product.vendor != blank %}
      <p class="product-card__vendor">{{ product.vendor | escape }}</p>
    {% endif %}

    {% render 'price', product: product, show_compare_at: true %}

    {% if show_quick_add and product.available %}
      <div class="product-card__actions">
        {% render 'product-form', product: product, form_type: 'quick-add', show_quantity: false %}
      </div>
    {% endif %}
  </div>
</div>