{#
 # ============================================================================
 # ATOM: HEXAGON BADGE
 # ============================================================================
 #
 # Hexagone à deux couches (outer ring + inner fill) avec icône ou texte centré.
 # Utilisé pour les badges de niveau (outils) et les badges spéciaux.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre   | Type    | Défaut | Description                              |
 # |-------------|---------|--------|------------------------------------------|
 # | label       | string  | null   | Texte/chiffre affiché (prioritaire)      |
 # | icon        | string  | 'star' | Icône Solar (si label absent)            |
 # | level       | int     | null   | 1–5 → auto-résout les couleurs de niveau |
 # | colorOuter  | string  | null   | Hex override outer ring (ex: '#E8C49A')  |
 # | colorInner  | string  | null   | Hex override inner fill (ex: '#CD7F32')  |
 # | size        | string  | 'md'   | 'sm' (40px), 'md' (64px), 'lg' (80px)   |
 # | locked      | bool    | false  | Rendu en niveaux de gris                 |
 #
 # ============================================================================
 # PALETTE DES NIVEAUX
 # ============================================================================
 #
 # | Level | Nom     | Outer    | Inner    |
 # |-------|---------|----------|----------|
 # |   1   | Bronze  | #E8C49A  | #CD7F32  |
 # |   2   | Argent  | #DCDCDC  | #A8A8A8  |
 # |   3   | Or      | #FFE8A0  | #F5A623  |
 # |   4   | Platine | #DFF0FB  | #7EC8E3  |
 # |   5   | Diamant | #E0F9FF  | #38BDF8  |
 #
 # ============================================================================
 # EXEMPLES
 # ============================================================================
 #
 # Niveau auto-résolu (bronze) :
 # {% include '_atoms/hexagon-badge/hexagon-badge.html.twig' with {
 #     icon: 'star', level: 1
 # } only %}
 #
 # Couleurs custom (badge spécial) :
 # {% include '_atoms/hexagon-badge/hexagon-badge.html.twig' with {
 #     icon: 'bolt', colorOuter: '#FFE8A0', colorInner: '#F5A623', size: 'lg'
 # } only %}
 #
 # Verrouillé :
 # {% include '_atoms/hexagon-badge/hexagon-badge.html.twig' with {
 #     icon: 'crown', level: 4, locked: true
 # } only %}
 #
 # ============================================================================
 #}

{# @tailwind-safelist — Aucune classe dynamique : couleurs via style inline uniquement #}

{% set levelColors = {
    1: { outer: '#E8C49A', inner: '#CD7F32' },
    2: { outer: '#DCDCDC', inner: '#A8A8A8' },
    3: { outer: '#FFE8A0', inner: '#F5A623' },
    4: { outer: '#DFF0FB', inner: '#7EC8E3' },
    5: { outer: '#E0F9FF', inner: '#38BDF8' },
} %}

{% set label      = label ?? null %}
{% set icon       = icon ?? 'star' %}
{% set level      = level ?? null %}
{% set colorOuter = colorOuter ?? (level and levelColors[level] is defined ? levelColors[level].outer : '#E0E0E0') %}
{% set colorInner = colorInner ?? (level and levelColors[level] is defined ? levelColors[level].inner : '#A0A0A0') %}
{% set size       = size ?? 'md' %}
{% set locked     = locked ?? false %}

{% set hexPath = 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)' %}

{% set sizes = {
    'sm': { outer: 'w-10 h-10',  inner: 'w-[30px] h-[30px]',  iconSize: 'sm',  labelClass: 'text-xs font-bold' },
    'md': { outer: 'w-16 h-16',  inner: 'w-12 h-12',          iconSize: 'lg',  labelClass: 'text-base font-bold' },
    'lg': { outer: 'w-20 h-20',  inner: 'w-16 h-16',          iconSize: 'xl',  labelClass: 'text-lg font-bold' },
} %}

{% set s = sizes[size] ?? sizes['md'] %}

<div class="relative flex items-center justify-center {{ s.outer }} flex-shrink-0 {{ locked ? 'grayscale opacity-50' : '' }}"
     style="clip-path: {{ hexPath }}; background-color: {{ colorOuter }};">
    <div class="flex items-center justify-center text-white {{ s.inner }}"
         style="clip-path: {{ hexPath }}; background-color: {{ colorInner }};">
        {% if label is not null %}
            <span class="{{ s.labelClass }} leading-none">{{ label }}</span>
        {% else %}
            {% include '_atoms/icon/icon.html.twig' with {
                name: icon,
                size: s.iconSize,
                color: 'current'
            } only %}
        {% endif %}
    </div>
</div>