{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}

{% macro Mask(params) %}
  {% set componentClassName = "ds-mask" %}
  {% set classNamePrefix = componentClassName + "--" %}

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

  <div class="{{ classes }}">
    {% if params.variant == "quiz-mask" %}
      {{ IconUse({ icon: "quiz-mask" }) }}
    {% endif %}

    <div style="clip-path: url(#{{params.variant}})" class="{{ componentClassName }}__image-wrapper">
      {{ params.imageHtml | safe }}
    </div>
  </div>
{% endmacro %}