{#
 # ============================================================================
 # ATOM: AVATAR
 # ============================================================================
 #
 # Avatar avec image ou initiales fallback, utilisant 100% Tailwind CSS.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre | Type    | Défaut    | Description                              |
 # |-----------|---------|-----------|------------------------------------------|
 # | src       | string  | null      | URL de l'image                           |
 # | alt       | string  | ''        | Texte alternatif                         |
 # | name      | string  | null      | Nom pour générer les initiales           |
 # | initials  | string  | null      | Initiales (priorité sur name)            |
 # | size      | string  | 'md'      | Taille: xs, sm, md, lg, xl, 2xl          |
 # | rounded   | string  | 'full'    | Arrondi: md, lg, xl, full                |
 # | variant   | string  | 'gray'    | Couleur fond: gray, primary, success...  |
 # | status    | string  | null      | Indicateur: online, offline, busy, away  |
 # | class     | string  | ''        | Classes additionnelles                   |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Avatar avec image:
 # {% include '_atoms/avatar/avatar.html.twig' with {
 #     src: user.avatar,
 #     alt: user.name,
 #     size: 'lg'
 # } %}
 #
 # Avatar avec initiales:
 # {% include '_atoms/avatar/avatar.html.twig' with {
 #     name: 'Jean Dupont',
 #     variant: 'primary'
 # } %}
 #
 # Avatar avec statut:
 # {% include '_atoms/avatar/avatar.html.twig' with {
 #     src: user.avatar,
 #     status: 'online'
 # } %}
 #
 # ============================================================================
 #}

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

{% set src = src ?? null %}
{% set alt = alt ?? '' %}
{% set name = name ?? null %}
{% set initials = initials ?? null %}
{% set size = size ?? 'md' %}
{% set rounded = rounded ?? 'full' %}
{% set variant = variant ?? 'gray' %}
{% set status = status ?? null %}
{% set class = class ?? '' %}

{# Générer les initiales depuis le nom #}
{% if not initials and name %}
    {% set nameParts = name|split(' ') %}
    {% if nameParts|length >= 2 %}
        {% set initials = (nameParts[0]|first ~ nameParts[1]|first)|upper %}
    {% else %}
        {% set initials = (name|first ~ name|slice(1, 1))|upper %}
    {% endif %}
{% endif %}

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

{% set sizeClasses = {
    'xs': 'w-6 h-6 text-xs',
    'sm': 'w-8 h-8 text-sm',
    'md': 'w-10 h-10 text-base',
    'lg': 'w-12 h-12 text-lg',
    'xl': 'w-16 h-16 text-xl',
    '2xl': 'w-20 h-20 text-2xl'
} %}

{% set statusSizeClasses = {
    'xs': 'w-1.5 h-1.5 ring-1',
    'sm': 'w-2 h-2 ring-1',
    'md': 'w-2.5 h-2.5 ring-2',
    'lg': 'w-3 h-3 ring-2',
    'xl': 'w-4 h-4 ring-2',
    '2xl': 'w-5 h-5 ring-2'
} %}

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

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

{# ============================================================================
   CLASSES TAILWIND - VARIANTES (fond pour initiales)
   ============================================================================ #}

{% set variantClasses = {
    'gray': 'bg-gray-200 text-gray-600',
    'primary': 'bg-primary/20 text-primary',
    'success': 'bg-success/20 text-success',
    'warning': 'bg-warning/20 text-warning',
    'error': 'bg-error/20 text-error',
    'info': 'bg-info/20 text-info',
    'cohorts': 'bg-cohorts/20 text-cohorts'
} %}

{# ============================================================================
   CLASSES TAILWIND - STATUS
   ============================================================================ #}

{% set statusColors = {
    'online': 'bg-success',
    'offline': 'bg-gray-400',
    'busy': 'bg-error',
    'away': 'bg-warning'
} %}

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

<div class="relative inline-flex shrink-0 {{ class }}">
    {% if src %}
        {# Avatar avec image #}
        <img
            src="{{ src }}"
            alt="{{ alt }}"
            class="{{ sizeClasses[size] ?? sizeClasses['md'] }} {{ roundedClasses[rounded] ?? roundedClasses['full'] }} object-cover"
        >
    {% else %}
        {# Avatar avec initiales #}
        <div class="
            {{ sizeClasses[size] ?? sizeClasses['md'] }}
            {{ roundedClasses[rounded] ?? roundedClasses['full'] }}
            {{ variantClasses[variant] ?? variantClasses['gray'] }}
            flex items-center justify-center font-semibold select-none
        ">
            {{ initials ?? '?' }}
        </div>
    {% endif %}

    {# Indicateur de statut #}
    {% if status %}
        <span class="
            absolute bottom-0 right-0
            {{ statusSizeClasses[size] ?? statusSizeClasses['md'] }}
            {{ statusColors[status] ?? statusColors['offline'] }}
            rounded-full ring-white
        "></span>
    {% endif %}
</div>