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

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

  {% set extraClasses = [
    "ds-teaser--centered",
    classNamePrefix + 'hide-top-border' if params.mediaHtml,
    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 %}
      <div class="{{ componentClassName + '__media'}}">
        {{ params.mediaHtml | safe }}
      </div>
    {% endif %}
    <div class="{{ componentClassName + '__content'}}">
      <div class="ds-teaser__content-inner">
        {% if params.vignette %}
          <div class="ds-teaser__vignette">
            {{ params.vignette }}
          </div>
        {% endif %}
        <h2 class="ds-teaser__title">
          {% if params.highlight %}
            <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
          {% endif %}
          {{ params.title }}
        </h2>

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