{% 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 TeaserStandard(params) %}
  {% set componentClassName = "ds-teaser" %}
  {% set classNamePrefix = componentClassName + "--" %}

  {% set extraClasses = [
    "ds-teaser--standard",
    classNamePrefix + params.variant if params.variant,
    classNamePrefix + "compact" if params.isCompact,
    classNamePrefix + "standard-with-byline" if params.bylineHtml,
    classNamePrefix + "standard-without-byline" if not params.bylineHtml,
    classNamePrefix + "standard-with-vignette" if params.vignette,
    params.classNames if params.classNames
  ] | join(" ") %}

  {% call TeaserCard({
    targetLink: params.targetLink,
    areaType: params.areaType,
    theme: params.theme,
    attributes: params.attributes,
    classNames: extraClasses
  }) %}
    <div class="{{ componentClassName + '__content'}}">
      <div class="ds-teaser__content-inner">
        {% if params.mediaHtml and not params.bylineHtml %}
          {% set mediaClass = [
            componentClassName + '__media',
            componentClassName + '__media--rounded' if not params.isItalicHeadline,
            componentClassName + '__media--square-image' if params.isSquareImage
          ] | join(" ") %}
          <div class="{{ mediaClass }}">
            {{ params.mediaHtml | safe }}
          </div>
        {% endif %}

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

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

        {% if params.text and params.areaType !== "right" %}
          <p class="{{ componentClassName + '__text' }}">
            {% if params.sticker %}
              {{ TeaserDot({ flashing: params.isFlashingDot }) }}
              <span class="ds-teaser__sticker">
                {{ params.sticker }}
              </span>
            {% endif %}
            {{ params.text }}
          </p>
        {% endif %}
        {% if params.variant === "podcast" %}
          {{ TeaserFooter({
            variant: "podcast",
            publicationTime: params.publicationTime,
            duration: params.duration
          })}}
        {% elif params.publicationTime %}
          {{
            TeaserFooter({
              variant: "informationText",
              publicationTime: params.publicationTime,
              sectionName: params.sectionName
            })
          }}
        {% endif %}
      </div>

      {% if params.bylineHtml %}
        <div class="{{ componentClassName + '__byline'}}">
          {{ params.bylineHtml | safe }}
        </div>
      {% endif %}
    </div>
  {% endcall %}
{% endmacro %}