{#
 # ============================================================================
 # MOLECULE: OPTION CARD
 # ============================================================================
 # Carte sélectionnable (icône + titre + description) utilisée dans les
 # groupes de choix exclusifs : visibilité, mode de génération, etc.
 #
 # COMPOSITION
 # -----------
 # - _atoms/icon/icon.html.twig
 #
 # PARAMÈTRES
 # ----------
 # icon         : string  Nom de l'icône Solar                           (requis)
 # title        : string  Titre principal                                 (requis)
 # description  : string  Texte secondaire                                (optionnel)
 # selected     : bool    État sélectionné                                (défaut : false)
 # disabled     : bool    État désactivé                                  (défaut : false)
 # disabledHint : string  Texte alternatif quand disabled = true          (optionnel)
 # attr         : object  Attributs HTML additionnels (data-*, etc.)      (optionnel)
 # class        : string  Classes additionnelles                          (optionnel)
 # ============================================================================
 #}
{% set icon         = icon ?? null %}
{% set title        = title ?? '' %}
{% set description  = description ?? null %}
{% set selected     = selected ?? false %}
{% set disabled     = disabled ?? false %}
{% set disabledHint = disabledHint ?? null %}
{% set attr         = attr ?? {} %}
{% set class        = class ?? '' %}

{% set stateClasses = selected
    ? 'border-primary bg-primary/5 cursor-pointer'
    : (disabled
        ? 'border-gray-200 bg-white opacity-50 cursor-not-allowed'
        : 'border-gray-200 bg-white cursor-pointer hover:border-primary/40 hover:bg-primary/5 hover:-translate-y-0.5 hover:shadow-sm') %}

{% set iconColor = selected ? 'text-primary' : (disabled ? 'text-gray-300' : 'text-gray-400') %}

<button type="button"
        class="flex items-center gap-3 p-3.5 rounded-xl border-2 transition-all duration-150 text-left w-full {{ stateClasses }} {{ class }}"
        {% if disabled %}disabled{% endif %}
        {% for key, val in attr %}{{ key }}="{{ val }}" {% endfor %}>
    {% if icon %}
        <span class="shrink-0 {{ iconColor }}">
            {% include '_atoms/icon/icon.html.twig' with { name: icon, size: 'sm', color: 'current' } only %}
        </span>
    {% endif %}
    <div class="min-w-0">
        <p class="text-[13px] font-semibold text-gray-900">{{ title }}</p>
        {% if disabled and disabledHint %}
            <p class="text-[11px] text-gray-400">{{ disabledHint }}</p>
        {% elseif description %}
            <p class="text-[11px] text-gray-400">{{ description }}</p>
        {% endif %}
    </div>
</button>