{#
 # ============================================================================
 # MOLECULE: EMPTY STATE
 # ============================================================================
 #
 # Affichage pour les états vides (listes, recherches, etc.)
 # Combine icône, message et action optionnelle.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _atoms/typography/typography.html.twig
 # - _atoms/button/button.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre    | Type    | Défaut    | Description                              |
 # |--------------|---------|-----------|------------------------------------------|
 # | title        | string  | (requis)  | Titre principal                          |
 # | description  | string  | null      | Description secondaire                   |
 # | icon         | string  | 'inbox'   | Nom de l'icône                           |
 # | iconColor    | string  | 'muted'   | Couleur de l'icône                       |
 # | actionText   | string  | null      | Texte du bouton d'action                 |
 # | actionHref   | string  | null      | URL du bouton                            |
 # | actionIcon   | string  | null      | Icône du bouton                          |
 # | size         | string  | 'md'      | Taille: sm, md, lg                       |
 # | variant      | string  | 'default' | Style: default, card, minimal            |
 # | class        | string  | ''        | Classes additionnelles                   |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Empty state simple:
 # {% include '_molecules/empty-state/empty-state.html.twig' with {
 #     title: 'Aucun résultat',
 #     description: 'Essayez avec d\'autres mots-clés.',
 #     icon: 'search'
 # } %}
 #
 # Avec action:
 # {% include '_molecules/empty-state/empty-state.html.twig' with {
 #     title: 'Aucun cours',
 #     description: 'Créez votre premier cours pour commencer.',
 #     icon: 'book',
 #     actionText: 'Créer un cours',
 #     actionHref: '/courses/new',
 #     actionIcon: 'plus'
 # } %}
 #
 # ============================================================================
 #}

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

{% set title = title ?? 'Aucun élément' %}
{% set description = description ?? null %}
{% set icon = icon ?? 'inbox' %}
{% set iconColor = iconColor ?? 'muted' %}
{% set actionText = actionText ?? null %}
{% set actionHref = actionHref ?? null %}
{% set actionIcon = actionIcon ?? null %}
{% set actionDisabled = actionDisabled ?? false %}
{% set actionTooltip = actionTooltip ?? '' %}
{% set size = size ?? 'md' %}
{% set variant = variant ?? 'default' %}
{% set class = class ?? '' %}

{# ============================================================================
   CLASSES TAILWIND
   ============================================================================ #}

{% set sizeConfig = {
    'sm': {
        'padding': 'py-6 px-4',
        'iconSize': 'xl',
        'iconContainer': 'w-12 h-12',
        'titleSize': 'text-sm',
        'descSize': 'text-xs',
        'gap': 'gap-3'
    },
    'md': {
        'padding': 'py-10 px-6',
        'iconSize': '2xl',
        'iconContainer': 'w-16 h-16',
        'titleSize': 'text-base',
        'descSize': 'text-sm',
        'gap': 'gap-4'
    },
    'lg': {
        'padding': 'py-16 px-8',
        'iconSize': '2xl',
        'iconContainer': 'w-20 h-20',
        'titleSize': 'text-lg',
        'descSize': 'text-base',
        'gap': 'gap-5'
    }
} %}

{% set variantClasses = {
    'default': '',
    'card': 'bg-white rounded-xl border border-gray-200 shadow-sm',
    'minimal': ''
} %}

{% set config = sizeConfig[size] ?? sizeConfig['md'] %}

{% set containerClasses = [
    'flex flex-col items-center justify-center text-center',
    config.padding,
    config.gap,
    variantClasses[variant] ?? '',
    class
]|join(' ')|trim %}

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

<div class="{{ containerClasses }}">
    {# Icône #}
    <div class="{{ config.iconContainer }} rounded-full bg-gray-100 flex items-center justify-center">
        {% include '_atoms/icon/icon.html.twig' with {
            name: icon,
            size: config.iconSize,
            color: iconColor
        } only %}
    </div>

    {# Texte #}
    <div class="space-y-1">
        <p class="{{ config.titleSize }} font-medium text-gray-900">{{ title }}</p>
        {% if description %}
            <p class="{{ config.descSize }} text-gray-500 max-w-sm">{{ description }}</p>
        {% endif %}
    </div>

    {# Action #}
    {% if actionText %}
        {% if actionDisabled %}
            <span data-tooltip="{{ actionTooltip }}" data-tooltip-position="bottom">
                {% include '_atoms/button/button.html.twig' with {
                    label: actionText,
                    icon: actionIcon,
                    iconPosition: 'left',
                    variant: 'primary',
                    size: 'lg',
                    disabled: true
                } only %}
            </span>
        {% else %}
            {% include '_atoms/button/button.html.twig' with {
                label: actionText,
                href: actionHref,
                icon: actionIcon,
                iconPosition: 'left',
                variant: 'primary',
                size: 'lg'
            } only %}
        {% endif %}
    {% endif %}
</div>