{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}

{% macro TeaserNative(params) %}
  {% set componentClassName = "ds-teaser" %}
  {%- set nativeVariant = params.nativeVariant if params.nativeVariant else "standard" %}
  {%- set extraClasses = [
    "ds-teaser--native",
    "ds-teaser--native-" + nativeVariant,
    params.classNames if params.classNames
  ] | join(" ") %}

  {%- call TeaserCard({
    targetLink: params.targetLink,
    areaType: params.areaType,
    attributes: params.attributes,
    classNames: extraClasses
  }) %}

  <div class="{{ componentClassName + '__ad-bar'}}">
    <span>ANNONS</span>
  </div>

  {% if params.mediaHtml and nativeVariant !== "standard" %}
    <div class="{{ componentClassName + '__media'}}">
      {{ params.mediaHtml | safe}}
    </div>
  {% endif %}

  <div class="{{ componentClassName + '__content'}}">
    {% if params.mediaHtml and nativeVariant == "standard" %}
      {% set mediaClass = [
        componentClassName + '__media',
        componentClassName + '__media--rounded'
      ] | join(" ") %}
      <div class="{{ mediaClass }}">
        {{ params.mediaHtml | safe }}
      </div>
    {% endif %}

    {% if params.vignette %}
      <div class="ds-teaser__vignette">{{- params.vignette -}}</div>
    {% endif %}

    <h2 class="{{ componentClassName + '__title'}}">
      {{- params.title -}}
    </h2>

    {% if params.text and nativeVariant !== "right" %}
      <p class="{{ componentClassName + '__text' }}">
        {{- params.text -}}
      </p>
    {% endif %}
  </div>
  {% endcall %}
{% endmacro %}