{%- doc -%}
  Renders an "Add to cart" button with dynamic text and state. It shows different text based on whether the product can be added to the cart and provides visual feedback when an item is added.

  @param {boolean} can_add_to_cart - Whether the product can be added to the cart.
  @param {string} add_to_cart_text - The text to display on the button.
  @param {object} product - The product object to be added to the cart.
  @param {boolean} [icon_only_on_mobile] - If `true`, only the icon is shown on mobile devices.
  @param {string} [class] - Additional CSS classes to apply to the button.
  @param {string} [id] - The ID attribute for the button.
  @param {string} [data_testid] - The data-testid attribute for testing.
{%- enddoc -%}

{%- liquid
  assign default_add_to_cart_text = 'actions.add_to_cart' | t
  assign product_variant_media = product.selected_or_first_available_variant.featured_media.preview_image | image_url: width: 100
  if product.selected_or_first_available_variant.featured_media.preview_image == blank
    assign product_variant_media = product.featured_media.preview_image | image_url: width: 100
  endif
-%}

<add-to-cart-component
  ref="addToCartButtonContainer"
  data-product-variant-media="{{ product_variant_media }}"
  data-add-to-cart-animation="{{ settings.add_to_cart_animation }}"
>
  <button
    {% if id != blank %}
      id="{{ id }}"
    {% endif %}
    type="submit"
    name="add"
    ref="addToCartButton"
    on:click="/handleClick"
    class="button {{ class }}"
    {% if data_testid %}
      data-testid="{{ data_testid }}"
    {% endif %}
    {% unless can_add_to_cart %}
      disabled
    {% endunless %}
  >
    <span
      class="add-to-cart-text"
    >
      {% if can_add_to_cart %}
        <span
          aria-hidden="true"
          class="svg-wrapper add-to-cart-icon"
        >
          {{- 'icon-add-to-cart.svg' | inline_asset_content -}}
        </span>
      {% endif %}
      <span class="add-to-cart-text__content{% if icon_only_on_mobile %} is-visually-hidden-mobile{% endif %}">
        <span>
          <span>
            {{- add_to_cart_text | default: default_add_to_cart_text -}}
          </span>
        </span>
      </span>
    </span>
    {% comment %} checkmark burst markup {% endcomment %}
    <span class="add-to-cart__added">
      <span class="svg-wrapper add-to-cart__added-icon">
        {{- 'icon-checkmark-burst.svg' | inline_asset_content -}}
      </span>
    </span>
  </button>
</add-to-cart-component>
