{#
/**
 * Heading Component
 * 
 * Reusable heading component with optional link and display sizes.
 * 
 * Available variables:
 * - heading_html_tag: (string) HTML tag. Default: 'h2'
 * - display_size: (string) Display size (xl, 2xl, 3xl, 4xl, 5xl, 6xl).
 * - content: (string) Heading text.
 * - title_link: (string) Optional link URL.
 * - heading_utility_classes: (array) Additional classes.
 * - heading_link_utility_classes: (array) Link classes.
 * - heading_attributes: (Attribute) HTML attributes.
 *
 * Accessibility:
 * - Proper heading hierarchy
 * - Link has focus indicators
 * - Semantic HTML structure
 *
 * Theme Variables Used:
 * - text-body: Default heading color
 * - hover:text-primary: Link hover color
 */
#}

{% set heading_html_tag = heading_html_tag|default('h2') %}
{% set display_size = display_size|default('') %}
{% set heading_attributes = heading_attributes|default(create_attribute()) %}

{% set display_classes = {
  'xl': 'text-4xl',
  '2xl': 'text-5xl',
  '3xl': 'text-6xl',
  '4xl': 'text-7xl',
  '5xl': 'text-8xl',
  '6xl': 'text-9xl',
} %}

{% set heading_classes = [
  'font-bold text-body',
  display_size ? display_classes[display_size] : '',
]|merge(heading_utility_classes|default([])) %}

{% if title_link %}
  {% set heading_link_attributes = create_attribute().setAttribute('href', title_link) %}
  {% set heading_link_classes = [
    'hover:text-primary transition-colors duration-200',
    'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded',
  ]|merge(heading_link_utility_classes|default([])) %}
{% endif %}

{% if content %}
  <{{ heading_html_tag }} {{ heading_attributes.addClass(heading_classes) }}>
    {% block heading_content %}
      {% if title_link %}
        <a {{ heading_link_attributes.addClass(heading_link_classes) }}>
          {{ content }}
        </a>
      {% else %}
        {{ content }}
      {% endif %}
    {% endblock %}
  </{{ heading_html_tag }}>
{% endif %}

