{#
 # ============================================================================
 # ATOM: SKELETON
 # ============================================================================
 #
 # Placeholder de chargement animé utilisant 100% Tailwind CSS.
 # Affiche une forme grisée pulsante pendant le chargement du contenu.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre      | Type    | Défaut    | Description                              |
 # |----------------|---------|-----------|------------------------------------------|
 # | variant        | string  | 'text'    | Type: text, title, avatar, thumbnail,    |
 # |                |         |           | button, card, paragraph                  |
 # | width          | string  | 'full'    | Largeur: full, 3/4, 2/3, 1/2, 1/3, 1/4  |
 # |                |         |           | ou valeur CSS (100px, 10rem)             |
 # | height         | string  | null      | Hauteur personnalisée (CSS value)        |
 # | lines          | number  | 1         | Nombre de lignes (pour paragraph)        |
 # | rounded        | string  | 'md'      | Arrondi: none, sm, md, lg, full          |
 # | animation      | string  | 'pulse'   | Animation: pulse, wave, none             |
 # | class          | string  | ''        | Classes additionnelles                   |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Skeleton texte simple:
 # {% include '_atoms/skeleton/skeleton.html.twig' with {
 #     variant: 'text',
 #     width: '3/4'
 # } %}
 #
 # Skeleton avatar:
 # {% include '_atoms/skeleton/skeleton.html.twig' with {
 #     variant: 'avatar'
 # } %}
 #
 # Skeleton paragraphe (3 lignes):
 # {% include '_atoms/skeleton/skeleton.html.twig' with {
 #     variant: 'paragraph',
 #     lines: 3
 # } %}
 #
 # Skeleton card:
 # {% include '_atoms/skeleton/skeleton.html.twig' with {
 #     variant: 'card'
 # } %}
 #
 # ============================================================================
 #}

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

{% set variant = variant ?? 'text' %}
{% set width = width ?? 'full' %}
{% set height = height ?? null %}
{% set lines = lines ?? 1 %}
{% set rounded = rounded ?? 'md' %}
{% set animation = animation ?? 'pulse' %}
{% set class = class ?? '' %}

{# ============================================================================
   CLASSES TAILWIND - LARGEURS PRÉDÉFINIES
   ============================================================================ #}

{% set widthClasses = {
    'full': 'w-full',
    '3/4': 'w-3/4',
    '2/3': 'w-2/3',
    '1/2': 'w-1/2',
    '1/3': 'w-1/3',
    '1/4': 'w-1/4'
} %}

{# ============================================================================
   CLASSES TAILWIND - ARRONDIS
   ============================================================================ #}

{% set roundedClasses = {
    'none': 'rounded-none',
    'sm': 'rounded-sm',
    'md': 'rounded-md',
    'lg': 'rounded-lg',
    'xl': 'rounded-xl',
    'full': 'rounded-full'
} %}

{# ============================================================================
   CLASSES TAILWIND - ANIMATIONS
   ============================================================================ #}

{% set animationClasses = {
    'pulse': 'animate-pulse',
    'wave': 'animate-shimmer',
    'none': ''
} %}

{# ============================================================================
   VARIANTES PRÉDÉFINIES
   ============================================================================ #}

{% set variantConfigs = {
    'text': {
        'height': 'h-4',
        'rounded': 'md',
        'width': width
    },
    'title': {
        'height': 'h-6',
        'rounded': 'md',
        'width': '2/3'
    },
    'avatar': {
        'height': 'h-12 w-12',
        'rounded': 'full',
        'width': null
    },
    'avatar-sm': {
        'height': 'h-8 w-8',
        'rounded': 'full',
        'width': null
    },
    'avatar-lg': {
        'height': 'h-16 w-16',
        'rounded': 'full',
        'width': null
    },
    'thumbnail': {
        'height': 'h-24',
        'rounded': 'lg',
        'width': 'full'
    },
    'button': {
        'height': 'h-10',
        'rounded': 'lg',
        'width': '1/4'
    },
    'card': {
        'height': 'h-48',
        'rounded': 'xl',
        'width': 'full'
    },
    'input': {
        'height': 'h-12',
        'rounded': 'lg',
        'width': 'full'
    }
} %}

{# Récupérer la config de la variante #}
{% set config = variantConfigs[variant] ?? variantConfigs['text'] %}

{# ============================================================================
   RENDU HTML - PARAGRAPH (lignes multiples)
   ============================================================================ #}

{% if variant == 'paragraph' %}
    <div class="space-y-3 {{ class }}">
        {% for i in 1..lines %}
            {% set lineWidth = i == lines ? '2/3' : 'full' %}
            <div class="bg-gray-200 {{ animationClasses[animation] ?? 'animate-pulse' }} h-4 {{ roundedClasses[rounded] ?? 'rounded-md' }} {{ widthClasses[lineWidth] ?? 'w-full' }}"
                 {% if animation == 'wave' %}style="animation-delay: {{ (i - 1) * 100 }}ms"{% endif %}>
            </div>
        {% endfor %}
    </div>

{# ============================================================================
   RENDU HTML - VARIANTES SIMPLES
   ============================================================================ #}

{% else %}
    {% set finalWidth = widthClasses[width] ?? (widthClasses[config.width] ?? '') %}
    {% set finalHeight = height ?? config.height %}
    {% set finalRounded = roundedClasses[config.rounded] ?? roundedClasses[rounded] %}

    <div class="bg-gray-200 {{ animationClasses[animation] ?? 'animate-pulse' }} {{ finalHeight }} {{ finalWidth }} {{ finalRounded }} {{ class }}"
         {% if height and height matches '/^\\d/' %}style="height: {{ height }}"{% endif %}
         {% if width and width matches '/^\\d/' %}style="width: {{ width }}"{% endif %}>
    </div>
{% endif %}

{# ============================================================================
   STYLES POUR L'ANIMATION WAVE (shimmer)
   ============================================================================ #}
{% if animation == 'wave' %}
<style>
    @keyframes shimmer {
        0% {
            background-position: -200% 0;
        }
        100% {
            background-position: 200% 0;
        }
    }
    .animate-shimmer {
        background: linear-gradient(
            90deg,
            #e5e7eb 0%,
            #f3f4f6 50%,
            #e5e7eb 100%
        );
        background-size: 200% 100%;
        animation: shimmer 1.5s ease-in-out infinite;
    }
</style>
{% endif %}