{% from '@bonniernews/dn-design-system-web/components/pictogram/pictogram.njk' import Pictogram %}
{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}

{% macro EmptyState(params) %}
  {% set componentClassName = "ds-empty-state" %}

  {%- set classes = [
    componentClassName,
    params.classNames if params.classNames
  ] | join(" ") %}
  {% set attributes = getAttributes(params.attributes) %}

  <div class="{{ classes }}" {{- attributes | safe }}>
      {% if params.iconName %}
        {{ Pictogram({
          variant: "brand",
          size: "large",
          iconName: params.iconName,
          attributes: { "aria-hidden": "true" }
        })}}
      {% endif %}

      <div class="{{ componentClassName + '__text' }}">
        {% if params.title %}
          <h2>{{ params.title }}</h2>
        {% endif %}
        {% if params.body %}
          <span class="{{ componentClassName + '__body' }}">{{ params.body }}</span>
        {% endif %}
      </div>

      {% if params.brandButton or params.primaryButton %}
        <div class="{{ componentClassName + '__button-wrapper' }}">
          {% if params.brandButton %}
            {{ Button({
              text: params.brandButton.text,
              variant: "primary",
              href: params.brandButton.href,
              classNames: params.brandButton.classNames,
              attributes: params.brandButton.attributes,
              forcePx: params.forcePx,
              fullWidth: true
            })}}
          {% endif %}

          {% if params.primaryButton %}
            {{ Button({
              text: params.primaryButton.text,
              variant: "secondaryOutline",
              href: params.primaryButton.href,
              classNames: params.primaryButton.classNames,
              attributes: params.primaryButton.attributes,
              forcePx: params.forcePx,
              fullWidth: true
            })}}
          {% endif %}
        </div>
      {% endif %}
  </div>
{% endmacro %}