{#
 # ============================================================================
 # ATOM: SPINNER
 # ============================================================================
 #
 # Indicateur de chargement paramétrable utilisant 100% Tailwind CSS.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre | Type    | Défaut    | Description                              |
 # |-----------|---------|-----------|------------------------------------------|
 # | size      | string  | 'md'      | Taille: xs, sm, md, lg, xl               |
 # | variant   | string  | 'primary' | Couleur: primary, white, gray, current   |
 # | label     | string  | null      | Texte accessible (sr-only)               |
 # | class     | string  | ''        | Classes additionnelles                   |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Spinner simple:
 # {% include '_atoms/spinner/spinner.html.twig' %}
 #
 # Spinner dans un bouton:
 # {% include '_atoms/spinner/spinner.html.twig' with { size: 'sm', variant: 'white' } %}
 #
 # Spinner pleine page:
 # {% include '_atoms/spinner/spinner.html.twig' with { size: 'xl', label: 'Chargement...' } %}
 #
 # ============================================================================
 #}

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

{% set size = size ?? 'md' %}
{% set variant = variant ?? 'primary' %}
{% set label = label ?? 'Chargement' %}
{% set class = class ?? '' %}

{# ============================================================================
   CLASSES TAILWIND - TAILLES
   ============================================================================ #}

{% set sizeClasses = {
    'xs': 'w-3 h-3',
    'sm': 'w-4 h-4',
    'md': 'w-6 h-6',
    'lg': 'w-8 h-8',
    'xl': 'w-12 h-12'
} %}

{% set strokeWidth = {
    'xs': '4',
    'sm': '4',
    'md': '3',
    'lg': '3',
    'xl': '2'
} %}

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

{% set variantClasses = {
    'primary': 'text-primary',
    'white': 'text-white',
    'gray': 'text-gray-400',
    'current': 'text-current',
    'success': 'text-success',
    'error': 'text-error'
} %}

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

<svg
    class="animate-spin {{ sizeClasses[size] ?? sizeClasses['md'] }} {{ variantClasses[variant] ?? variantClasses['primary'] }} {{ class }}"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    role="status"
    aria-label="{{ label }}"
>
    <circle
        class="opacity-25"
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        stroke-width="{{ strokeWidth[size] ?? '3' }}"
    ></circle>
    <path
        class="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
    <span class="sr-only">{{ label }}</span>
</svg>