{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
{% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
{% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}

{% macro TeaserSplit(params) %}
  {% set componentClassName = "ds-teaser" %}
  {% set classNamePrefix = componentClassName + "--" %}

  {% set extraClasses = [
    "ds-teaser--split",
    classNamePrefix + params.variant if params.variant,
    params.classNames if params.classNames
  ] | join(" ") %}

  {% call TeaserCard({
    targetLink: params.targetLink,
    areaType: params.areaType,
    theme: params.theme,
    attributes: params.attributes,
    classNames: extraClasses
  }) %}
    {% if params.mediaHtml %}
      {% set mediaClass = [
        componentClassName + '__media',
        componentClassName + '__media--rounded'
      ] | join(" ") %}
      <div class="{{ mediaClass }}">
        {{ params.mediaHtml | safe }}
      </div>
    {% endif %}

    <div class="{{ componentClassName + '__content'}}">
      {% if params.vignette %}
        <div class="ds-teaser__vignette">
          {% if params.variant === "podcast" %}
            {{ IconUse({ icon: "headphones" }) }}
          {% endif %}
          {{ params.vignette }}
        </div>
      {% endif %}

      <h2 class="{{ componentClassName + '__title' }}">
        {% if params.highlight %}
          <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
        {% endif %}
        {{ params.title }}
      </h2>

      {% if params.text %}
        <p class="{{ componentClassName + '__text' }}">
          {% if params.sticker %}
            {{ TeaserDot({ flashing: params.isFlashingDot }) }}
            <span class="ds-teaser__sticker">
              {{ params.sticker }}
            </span>
          {% endif %}
          {{ params.text }}
        </p>

        {% if params.variant === "podcast" %}
          {{ TeaserFooter({
            variant: "podcast",
            publicationTime: params.publicationTime,
            duration: params.duration
          }) }}
        {% endif %}
      {% endif %}
    </div>
  {% endcall %}
{% endmacro %}

{% macro TeaserSplitContainer(params) %}
  {%- set componentClassName = "ds-split-container" %}
  {%- set classNamePrefix = componentClassName + "--" %}
  {%- set classes = [
    componentClassName,
    classNamePrefix + params.areaType if params.areaType == "bauta",
    "ds-theme--" + params.theme if params.theme,
    params.classNames if params.classNames
  ] | join(" ") %}
  <div class="{{ classes }}" {{- getAttributes(params.attributes) | safe }}>{{ params.teasersHtml | safe }}</div>
{% endmacro %}