{% comment %}
  Renders a product card

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

  Usage:
  {% render 'product-image', product: product, show_secondary_image: true %}
{% 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 %}
    {%- if product.media[1] != null and show_secondary_image -%}
      <div class='xo-product-image__secondary'>
        {%- render 'image', image: product.media[1].preview_image, media_aspect_ratio: media_aspect_ratio -%}
      </div>
    {%- 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>
