{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
{% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}
{% from '@bonniernews/dn-design-system-web/components/link-box/link-box-item.njk' import LinkBoxItem %}

{% macro LinkBox(params) %}
  {%- set componentClassName = "ds-link-box" %}
  {%- set classNamePrefix = componentClassName + "--" %}
  {%- set classes = [
    componentClassName,
    params.classNames if params.classNames
  ] | join(" ") %}
  {%- set attributes = getAttributes(params.attributes) %}
  <div class="{{ classes }}" {{- attributes | safe }}>
    {% if params.vignetteText %}
      {{ GroupHeader({
        title: params.vignetteText,
        href: params.vignetteTargetUrl
      }) }}
    {% endif %}
    <div class="{{ componentClassName + '__grid' }}">
      {% for item in params.linkBoxItems %}
        {{ LinkBoxItem(item) | safe }}
      {% endfor %}
    </div>
  </div>
{% endmacro %}