{#
 # ============================================================================
 # ATOM: DIVIDER
 # ============================================================================
 #
 # Séparateur horizontal ou vertical utilisant 100% Tailwind CSS.
 # Permet de séparer visuellement des sections de contenu.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre      | Type    | Défaut       | Description                         |
 # |----------------|---------|--------------|-------------------------------------|
 # | orientation    | string  | 'horizontal' | horizontal, vertical                |
 # | variant        | string  | 'solid'      | solid, dashed, dotted               |
 # | color          | string  | 'gray'       | gray, light, primary, etc.          |
 # | spacing        | string  | 'md'         | Marge: none, sm, md, lg, xl         |
 # | text           | string  | null         | Texte centré sur le séparateur      |
 # | textPosition   | string  | 'center'     | Position: left, center, right       |
 # | icon           | string  | null         | Icône à la place du texte           |
 # | class          | string  | ''           | Classes additionnelles              |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Divider simple:
 # {% include '_atoms/divider/divider.html.twig' %}
 #
 # Divider avec texte:
 # {% include '_atoms/divider/divider.html.twig' with {
 #     text: 'ou'
 # } %}
 #
 # Divider vertical:
 # {% include '_atoms/divider/divider.html.twig' with {
 #     orientation: 'vertical'
 # } %}
 #
 # ============================================================================
 #}

{# ============================================================================
   CONFIGURATION DES VALEURS PAR DÉFAUT
   ============================================================================ #}

{% set orientation = orientation ?? 'horizontal' %}
{% set variant = variant ?? 'solid' %}
{% set color = color ?? 'gray' %}
{% set spacing = spacing ?? 'md' %}
{% set text = text ?? null %}
{% set textPosition = textPosition ?? 'center' %}
{% set icon = icon ?? null %}
{% set class = class ?? '' %}

{# ============================================================================
   CLASSES TAILWIND - COULEURS
   ============================================================================ #}

{% set colorClasses = {
    'gray': 'border-gray-200',
    'light': 'border-gray-100',
    'dark': 'border-gray-400',
    'primary': 'border-primary/30',
    'success': 'border-success/30',
    'error': 'border-error/30',
    'warning': 'border-warning/30'
} %}

{% set textColorClasses = {
    'gray': 'text-gray-500 bg-white',
    'light': 'text-gray-400 bg-white',
    'dark': 'text-gray-600 bg-white',
    'primary': 'text-primary bg-white',
    'success': 'text-success bg-white',
    'error': 'text-error bg-white',
    'warning': 'text-warning bg-white'
} %}

{# ============================================================================
   CLASSES TAILWIND - VARIANTES
   ============================================================================ #}

{% set variantClasses = {
    'solid': 'border-solid',
    'dashed': 'border-dashed',
    'dotted': 'border-dotted'
} %}

{# ============================================================================
   CLASSES TAILWIND - ESPACEMENTS
   ============================================================================ #}

{% set spacingClasses = {
    'none': '',
    'sm': orientation == 'horizontal' ? 'my-2' : 'mx-2',
    'md': orientation == 'horizontal' ? 'my-4' : 'mx-4',
    'lg': orientation == 'horizontal' ? 'my-6' : 'mx-6',
    'xl': orientation == 'horizontal' ? 'my-8' : 'mx-8'
} %}

{# ============================================================================
   RENDU HTML - HORIZONTAL
   ============================================================================ #}

{% if orientation == 'horizontal' %}

    {% if text or icon %}
        {# Divider avec texte ou icône #}
        <div class="flex items-center {{ spacingClasses[spacing] ?? spacingClasses['md'] }} {{ class }}" role="separator">
            {# Ligne gauche #}
            <div class="flex-1 border-t {{ variantClasses[variant] ?? '' }} {{ colorClasses[color] ?? colorClasses['gray'] }}"></div>

            {# Texte ou icône #}
            <span class="px-4 text-sm {{ textColorClasses[color] ?? textColorClasses['gray'] }}">
                {% if icon %}
                    {% include '_atoms/icon/icon.html.twig' with { name: icon, size: 'sm' } only %}
                {% else %}
                    {{ text }}
                {% endif %}
            </span>

            {# Ligne droite #}
            <div class="flex-1 border-t {{ variantClasses[variant] ?? '' }} {{ colorClasses[color] ?? colorClasses['gray'] }}"></div>
        </div>
    {% else %}
        {# Divider simple #}
        <hr class="border-t {{ variantClasses[variant] ?? '' }} {{ colorClasses[color] ?? colorClasses['gray'] }} {{ spacingClasses[spacing] ?? spacingClasses['md'] }} {{ class }}" role="separator">
    {% endif %}

{# ============================================================================
   RENDU HTML - VERTICAL
   ============================================================================ #}

{% else %}
    <div class="inline-block h-full min-h-[1rem] w-px border-l {{ variantClasses[variant] ?? '' }} {{ colorClasses[color] ?? colorClasses['gray'] }} {{ spacingClasses[spacing] ?? spacingClasses['md'] }} {{ class }}" role="separator"></div>
{% endif %}