{#
 # ============================================================================
 # MOLECULE: SECTION DIVIDER
 # ============================================================================
 #
 # Separateur de section avec icone, titre, sous-titre et ligne decorative.
 # Remplace section-header pour les pages riches comme le dashboard.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilises)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre     | Type    | Defaut     | Description                           |
 # |---------------|---------|------------|---------------------------------------|
 # | title         | string  | (requis)   | Titre de la section                   |
 # | subtitle      | string  | null       | Sous-titre (ex: "6 outils - 508k")   |
 # | icon          | string  | null       | Nom de l'icone                        |
 # | iconColor     | string  | 'primary'  | Couleur de l'icone/fond               |
 # | class         | string  | ''         | Classes additionnelles                |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Simple:
 # {% include '_molecules/section-divider/section-divider.html.twig' with {
 #     title: 'Vos outils',
 #     icon: 'widget-add',
 #     iconColor: 'primary'
 # } only %}
 #
 # Avec sous-titre et slot droit:
 # {% embed '_molecules/section-divider/section-divider.html.twig' with {
 #     title: 'Vos badges',
 #     subtitle: '6 debloques sur 9',
 #     icon: 'medal-star',
 #     iconColor: 'warning'
 # } %}
 #     {% block right %}
 #         <button>Voir tout</button>
 #     {% endblock %}
 # {% endembed %}
 #
 # ============================================================================
 #}

{# ============================================================================
   CONFIGURATION DES VALEURS PAR DEFAUT
   ============================================================================ #}

{% set title = title ?? 'Section' %}
{% set subtitle = subtitle ?? null %}
{% set icon = icon ?? null %}
{% set iconColor = iconColor ?? 'primary' %}
{% set class = class ?? '' %}

{% set bgMap = {
    'primary':  'rgba(12,129,228,0.10)',
    'cohorts':  'rgba(139,92,246,0.10)',
    'success':  'rgba(48,147,68,0.10)',
    'error':    'rgba(209,0,0,0.10)',
    'warning':  'rgba(245,158,11,0.10)',
    'info':     'rgba(14,165,233,0.10)',
    'gray':     'rgba(107,114,128,0.10)',
} %}
{% set iconBg = bgMap[iconColor] ?? 'rgba(12,129,228,0.10)' %}

{# ============================================================================
   RENDU HTML
   ============================================================================ #}

<div class="flex items-center gap-4 mt-14 mb-7 {{ class }}">
    {# Icone dans un conteneur carre avec glow subtil #}
    {% if icon %}
        <div class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0"
             style="background:{{ iconBg }}">
            {% include '_atoms/icon/icon.html.twig' with {
                name: icon,
                size: 'lg',
                color: iconColor
            } only %}
        </div>
    {% endif %}

    {# Titre et sous-titre #}
    <div class="min-w-0 shrink">
        <h2 class="font-secondary text-xl sm:text-[28px] font-bold text-gray-900 tracking-tight leading-tight">
            {{ title|raw }}
        </h2>
        {% if subtitle %}
            <p class="text-xs text-gray-400 mt-1">{{ subtitle }}</p>
        {% endif %}
    </div>

    {# Ligne decorative #}
    <div class="flex-1 h-px bg-gradient-to-r from-gray-200/80 to-transparent ml-4"></div>

    {# Slot pour contenu a droite (bouton, etc.) #}
    {% block right %}{% endblock %}
</div>