{% set PROGRESS_BAR_DEFAULTS = {
  className: '',
  isSmall: false,
  isLarge: false,
  hasText: false,
  percent: 30
} %}

{% macro ProgressBar(settings = {}) %}
  {% set settings = merge(PROGRESS_BAR_DEFAULTS, settings) %}
  {% set classNames = [
    settings.className,
    'progress-bar--sm' if settings.isSmall,
    'progress-bar--xl' if settings.isLarge
  ] %}

  <div class="progress-bar {{ setClass(classNames) }}" x-data="progressBar({{ stringify(settings.percent) }})">
    <div class="progress-bar__line">
      <div class="progress-bar__fill" :style="`width: ${percentWidth}%`"></div>
    </div>
    {% if settings.hasText %}
      <p class="progress-bar__text" x-text="percentWidth"></p>
    {% endif %}
  </div>
{% endmacro %}