{%- doc -%}
  This snippet is used to render a product card.
  It is used in the product block, featured product block, and the product card block.
  The product object is null or when placeholders are rendered.

  @param {object} product - The product object
  @param {object} children - The children of the product card
  @param {object} [block] - The block object
  @param {number} [product_card_gap] - The gap between the product card children (overrides block settings)
{%- enddoc -%}

{% assign block_settings = block.settings %}

{% style %}
  {% if request.visual_preview_mode %}
    product-card[data-product-transition] {
      width: 100%;
      min-width: 250px;
    }
  {% endif %}
{% endstyle %}

{% liquid
  assign has_quick_add = false
  if settings.quick_add and product.available
    assign has_quick_add = true
  endif

  assign has_mobile_quick_add = false
  if has_quick_add and settings.mobile_quick_add
    assign has_mobile_quick_add = true
  endif

  assign product_card_id = 'product-card-link-' | append: block.id | append: '-' | append: product.id
  assign product_card_gap_value = product_card_gap | default: block_settings.product_card_gap

  # Logic to determine which variant URL to use (matching swatch selection logic)
  assign variant_to_link = product.selected_or_first_available_variant

  if settings.transition_to_main_product
    assign featured_image = variant_to_link.featured_image
    if featured_image == blank
      assign featured_image = product.featured_media.preview_image
    endif

    if featured_image != blank
      assign featured_media_url = featured_image | image_url: width: 500
    endif
  endif

  assign onboarding = false
  if product.id == empty or product == blank
    assign onboarding = true
  endif
%}

<product-card
  class="product-card size-style"
  style="{% render 'size-style', settings: block_settings %}"
  data-product-id="{{ product.id }}"
  id="product-card-{{ block.id }}"
  {% if settings.transition_to_main_product %}
    data-product-transition="true"
    data-featured-media-url="{{ featured_media_url }}"
    on:click="/handleViewTransition"
  {% endif %}
  {{ block.shopify_attributes }}
  {% if onboarding %}
    data-placeholder="true"
  {% endif %}
>
  <a
    id="{{ product_card_id | md5 }}"
    {% unless onboarding %}
      href="{{ variant_to_link.url }}"
    {% endunless %}
    class="product-card__link"
    ref="productCardLink"
  >
    <span class="visually-hidden">
      {{ product.title }}
    </span>
  </a>
  <div
    class="
      product-card__content
      layout-panel-flex
      layout-panel-flex--column
      product-grid__card
      spacing-style
      border-style
      gap-style
      {% if block_settings.inherit_color_scheme == false %} color-{{ block_settings.color_scheme }}{% endif %}
    "
    style="
      {% render 'border-override', settings: block_settings %}
      {% render 'layout-panel-style', settings: block_settings %}
      {% render 'spacing-style', settings: block_settings %}
      {% render 'gap-style', value: product_card_gap_value, name: 'product-card-gap' %}
      --quick-add-display: {% if has_quick_add %}flex{% else %}none{% endif %};
      --quick-add-mobile-display: {% if has_mobile_quick_add %}flex{% else %}none{% endif %};
      --quick-add-mobile-opacity: {% if has_mobile_quick_add %}1{% else %}0{% endif %};
      {% if block_settings.padding-inline-start > 0 %}--zoom-out-padding-inline-start: min(var(--padding-xs), {{ block_settings.padding-inline-start | times: 0.7}}px);{% endif %}
      {% if block_settings.padding-inline-end > 0 %}--zoom-out-padding-inline-end: min(var(--padding-xs), {{ block_settings.padding-inline-end | times: 0.7}}px);{% endif %}
      {% if block_settings.padding-block-start > 0 %}--zoom-out-padding-block-start: min(var(--padding-xs), {{ block_settings.padding-block-start | times: 0.7}}px);{% endif %}
      {% if block_settings.padding-block-end > 0 %}--zoom-out-padding-block-end: min(var(--padding-xs), {{ block_settings.padding-block-end | times: 0.7}}px);{% endif %}
    "
  >
    {{ children }}
  </div>
</product-card>

{% stylesheet %}
  .product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
{% endstylesheet %}
