{#
 # ============================================================================
 # ATOM: ILLUSTRATION
 # ============================================================================
 #
 # Wrapper paramétrable pour les illustrations Storyset.
 # Les SVG ont leur couleur primaire éditable via la variable {{ colorPrimary }}.
 # Les traits sombres (#263238) restent constants pour préserver le dessin.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre    | Type   | Défaut                | Description                       |
 # |--------------|--------|-----------------------|-----------------------------------|
 # | name         | string | 'learning'            | Slug : college-class / graduation-hats / learning |
 # | colorPrimary | string | 'var(--color-primary)'| Couleur principale (formes pleines)|
 # | size         | string | 'md'                  | xs · sm · md · lg · xl · 2xl · fluid|
 # | class        | string | ''                    | Classes additionnelles            |
 #
 # ============================================================================
 # EXEMPLES
 # ============================================================================
 #
 # Taille md, couleur primary par défaut :
 # {% include '_atoms/illustration/illustration.html.twig' with { name: 'learning' } only %}
 #
 # Taille fluid (s'adapte au container parent) :
 # {% include '_atoms/illustration/illustration.html.twig' with {
 #     name: 'graduation-hats',
 #     size: 'fluid',
 #     class: 'w-full max-w-md'
 # } only %}
 #
 # Couleur personnalisée :
 # {% include '_atoms/illustration/illustration.html.twig' with {
 #     name: 'college-class',
 #     colorPrimary: '#60A5FA',
 #     size: 'lg'
 # } only %}
 #
 # ============================================================================
 #}

{% set name = name ?? 'learning' %}
{% set colorPrimary = colorPrimary ?? 'var(--color-primary)' %}
{% set size = size ?? 'md' %}
{% set class = class ?? '' %}

{% set sizeClasses = {
    'xs': 'w-24 h-24',
    'sm': 'w-32 h-32',
    'md': 'w-48 h-48',
    'lg': 'w-64 h-64',
    'xl': 'w-80 h-80',
    '2xl': 'w-96 h-96',
    'fluid': ''
} %}

{% set appliedSize = sizeClasses[size] ?? sizeClasses['md'] %}

<div class="inline-flex items-center justify-center {{ appliedSize }} {{ class }}">
    {% include '_atoms/illustration/storyset/' ~ name ~ '.html.twig' with { colorPrimary: colorPrimary } only %}
</div>