{% comment %}
  Renders a product card

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - variant: {Object} Variant Liquid object (optional)
  - media_aspect_ratio: {Number} Aspect ratio of the image (optional)
  - placeholder_image: {String} Placeholder image (optional)

  Usage:
  {% render 'product-image', product: product, media_aspect_ratio: media_aspect_ratio %}
{% endcomment %}

<div class='xo-product-image'>
  {% if product %}
    {% if variant %}
      {%- render 'image', image: variant.featured_image, media_aspect_ratio: media_aspect_ratio -%}
    {% else %}
      {%- render 'image', image: product.featured_image, media_aspect_ratio: media_aspect_ratio -%}
    {% endif %}
  {% else %}
    {% if placeholder_image %}
      {{ placeholder | default: placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
    {% else %}
      {{ placeholder | default: 'product-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
    {% endif %}
  {% endif %}
</div>
