{#
 # ============================================================================
 # ATOM: KBD (Keyboard)
 # ============================================================================
 #
 # Affiche un raccourci clavier ou une touche utilisant 100% Tailwind CSS.
 # Utilisé pour documenter les raccourcis dans l'aide ou les tooltips.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre      | Type    | Défaut    | Description                              |
 # |----------------|---------|-----------|------------------------------------------|
 # | key            | string  | (requis)  | Touche ou raccourci à afficher           |
 # | keys           | array   | null      | Liste de touches (pour combinaisons)     |
 # | size           | string  | 'md'      | Taille: sm, md, lg                       |
 # | variant        | string  | 'default' | Style: default, minimal, dark            |
 # | class          | string  | ''        | Classes additionnelles                   |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Touche simple:
 # {% include '_atoms/kbd/kbd.html.twig' with {
 #     key: 'Enter'
 # } %}
 #
 # Combinaison de touches:
 # {% include '_atoms/kbd/kbd.html.twig' with {
 #     keys: ['Ctrl', 'S']
 # } %}
 #
 # Raccourci Mac:
 # {% include '_atoms/kbd/kbd.html.twig' with {
 #     keys: ['⌘', 'Shift', 'P']
 # } %}
 #
 # ============================================================================
 #}

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

{% set key = key ?? null %}
{% set keys = keys ?? null %}
{% set size = size ?? 'md' %}
{% set variant = variant ?? 'default' %}
{% set class = class ?? '' %}

{# Si key est fourni mais pas keys, créer un tableau avec une seule touche #}
{% if key and not keys %}
    {% set keys = [key] %}
{% endif %}

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

{% set sizeClasses = {
    'sm': 'text-xs px-1.5 py-0.5 min-w-[1.25rem]',
    'md': 'text-xs px-2 py-1 min-w-[1.5rem]',
    'lg': 'text-sm px-2.5 py-1 min-w-[1.75rem]'
} %}

{% set separatorSizes = {
    'sm': 'text-xs',
    'md': 'text-xs',
    'lg': 'text-sm'
} %}

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

{% set variantClasses = {
    'default': 'bg-gray-100 border border-gray-300 text-gray-700 shadow-sm',
    'minimal': 'bg-gray-50 border border-gray-200 text-gray-600',
    'dark': 'bg-gray-800 border border-gray-700 text-gray-200 shadow-sm'
} %}

{# ============================================================================
   ASSEMBLAGE DES CLASSES
   ============================================================================ #}

{% set kbdClasses = [
    'inline-flex items-center justify-center font-mono font-medium rounded',
    sizeClasses[size] ?? sizeClasses['md'],
    variantClasses[variant] ?? variantClasses['default'],
    class
]|join(' ')|trim %}

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

{% if keys %}
    <span class="inline-flex items-center gap-1">
        {% for k in keys %}
            <kbd class="{{ kbdClasses }}">{{ k }}</kbd>
            {% if not loop.last %}
                <span class="text-gray-400 {{ separatorSizes[size] ?? 'text-xs' }}">+</span>
            {% endif %}
        {% endfor %}
    </span>
{% endif %}