{% set heading_level = level|default(2) %}
{% set heading_align = align|default('left') %}
{% set heading_text_color = text_color|default('default') %}
{% set heading_text_size = text_size|default('heading-responsive-4xl') %}
{% set has_url = url is not empty and url != 'No URL' ? 'yes' : 'no' %}

{% set heading_variants =
  html_cva(
    variants: {
      align: {
        left: 'text-left',
        center: 'text-center',
        right: 'text-right'
      },
      textColor: {
        default: 'text-inherit',
        inverted: 'text-background',
        primary: 'text-primary'
      },
      textSize: {
        'heading-responsive-8xl': 'heading-responsive-8xl',
        'heading-responsive-7xl': 'heading-responsive-7xl',
        'heading-responsive-6xl': 'heading-responsive-6xl',
        'heading-responsive-5xl': 'heading-responsive-5xl',
        'heading-responsive-4xl': 'heading-responsive-4xl',
        'heading-responsive-3xl': 'heading-responsive-3xl',
        'heading-responsive-2xl': 'heading-responsive-2xl',
        'heading-responsive-xl': 'heading-responsive-xl'
      },
      hasUrl: {
        yes: 'duration-300 hover:scale-105 hover:opacity-90',
        no: ''
      }
    }
  )
%}

{# Normalize heading_classes - handle both array and string formats #}
{% set additional_classes = heading_classes|default('') %}
{% if additional_classes is iterable %}
  {% set additional_classes = additional_classes|join(' ') %}
{% endif %}

{% set heading_content %}
  {% if has_url == 'yes' %}
    <a href="{{ url }}">{{ heading_text }}</a>
  {% else %}
    {{ heading_text }}
  {% endif %}
{% endset %}

{% set heading_class_attr =
  heading_variants.apply(
    {
      align: heading_align,
      textColor: heading_text_color,
      textSize: heading_text_size,
      hasUrl: has_url
    },
    additional_classes
  )
%}

{% if heading_level == 1 %}
  <h1 class="{{ heading_class_attr }}">{{ heading_content }}</h1>
{% elseif heading_level == 2 %}
  <h2 class="{{ heading_class_attr }}">{{ heading_content }}</h2>
{% elseif heading_level == 3 %}
  <h3 class="{{ heading_class_attr }}">{{ heading_content }}</h3>
{% elseif heading_level == 4 %}
  <h4 class="{{ heading_class_attr }}">{{ heading_content }}</h4>
{% elseif heading_level == 5 %}
  <h5 class="{{ heading_class_attr }}">{{ heading_content }}</h5>
{% elseif heading_level == 6 %}
  <h6 class="{{ heading_class_attr }}">{{ heading_content }}</h6>
{% else %}
  <h2 class="{{ heading_class_attr }}">{{ heading_content }}</h2>
{% endif %}
