{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "styleguides/general/atoms/badge/badge-macros.njk" as badge %}

{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes, data) %}

<div class="a-menu-item {{classes}}">
  {% if data.link %}
    <a
      href="{{data.link}}"
      class="a-menu-item__link {{'js-overlay-trigger' if data.overlay}}"
      aria-label="{{data.text}}"
      {% if data.overlay %}data-overlay-target="{{data.overlay}}"{% endif %}
    >
    </a>
  {% else %}
    <button
      type="button"
      class="a-menu-item__link {{'js-overlay-trigger' if data.overlay}}"
      aria-label="{{data.text}}"
      {% if data.overlay %}data-overlay-target="{{data.overlay}}"{% endif %}
    >
    </button>
  {% endif %}

  {% if data.activeIcon %}

    <div class="a-menu-item__visual">
      <span class="a-menu-item__icon {{data.icon}}"></span>
      <span class="a-menu-item__icon a-menu-item__icon--active {{data.activeIcon}}"></span>
    </div>

  {% else %}

    <span class="a-menu-item__icon {{data.icon}}"></span>

  {% endif %}

  {% if data.badge %}
    {{badge.default("a-menu-item__badge", {
      text: data.badge
    })}}
  {% endif %}

  <span class="a-menu-item__text">{{data.text}}</span>
</div>

{% endmacro %}