{#
 # ============================================================================
 # MOLECULE: FEEDBACK CARD
 # ============================================================================
 #
 # Carte de confirmation/retour d'état : barre d'accent colorée, icône, titre,
 # badge optionnel, description et actions. Utilisée pour les pages standalone
 # (désabonnement, email vérifié, paiement confirmé, erreur, etc.).
 #
 # Toutes les couleurs utilisent les tokens du design system (variables.css) —
 # jamais de couleurs Tailwind hardcodées (bg-green-500 etc.).
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _atoms/button/button.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre        | Type    | Défaut         | Description                              |
 # |------------------|---------|----------------|------------------------------------------|
 # | title            | string  | (requis)       | Titre principal                          |
 # | description      | string  | null           | Texte descriptif (plain text)            |
 # | descriptionHtml  | string  | null           | Description avec HTML (prioritaire)      |
 # | tag              | string  | null           | Badge/chip affiché entre titre et desc   |
 # | variant          | string  | 'success'      | Couleur : success, error, warning, info  |
 # | icon             | string  | auto (variant) | Nom de l'icône (override automatique)    |
 # | primaryLabel     | string  | null           | Texte du bouton primaire                 |
 # | primaryHref      | string  | null           | URL du bouton primaire                   |
 # | primaryIcon      | string  | null           | Icône du bouton primaire                 |
 # | secondaryLabel   | string  | null           | Texte du bouton secondaire               |
 # | secondaryHref    | string  | null           | URL du bouton secondaire                 |
 # | secondaryVariant | string  | 'secondary'    | Variante bouton secondaire               |
 # | class            | string  | ''             | Classes additionnelles sur la card       |
 #
 # ============================================================================
 # VARIANTES — tokens design system uniquement
 # ============================================================================
 #
 # | Variant | Accent / icône         | Badge bg/text                    |
 # |---------|------------------------|----------------------------------|
 # | success | bg-success             | bg-success/10 · text-success-dark|
 # | error   | bg-error               | bg-error/10   · text-error-dark  |
 # | warning | bg-warning             | bg-warning/10 · text-warning-dark|
 # | info    | bg-info                | bg-info/10    · text-info-dark   |
 #
 # ============================================================================
 #}

{# ── Valeurs par défaut ──────────────────────────────────────────────────── #}
{% set variant          = variant          ?? 'success' %}
{% set description      = description      ?? null %}
{% set descriptionHtml  = descriptionHtml  ?? null %}
{% set tag              = tag              ?? null %}
{% set primaryLabel     = primaryLabel     ?? null %}
{% set primaryHref      = primaryHref      ?? null %}
{% set primaryIcon      = primaryIcon      ?? null %}
{% set secondaryLabel   = secondaryLabel   ?? null %}
{% set secondaryHref    = secondaryHref    ?? null %}
{% set secondaryVariant = secondaryVariant ?? 'secondary' %}
{% set class            = class            ?? '' %}

{# ── Config par variante (tokens design system) ──────────────────────────── #}
{% set variantConfig = {
    'success': { iconDefault: 'check',   iconBg: 'bg-success/10',  iconColor: 'success',  tagBg: 'bg-success/10',  tagText: 'text-success-dark',  tagDot: 'bg-success'  },
    'error':   { iconDefault: 'close',   iconBg: 'bg-error/10',    iconColor: 'error',    tagBg: 'bg-error/10',    tagText: 'text-error-dark',    tagDot: 'bg-error'    },
    'warning': { iconDefault: 'warning', iconBg: 'bg-warning/10',  iconColor: 'warning',  tagBg: 'bg-warning/10',  tagText: 'text-warning-dark',  tagDot: 'bg-warning'  },
    'info':    { iconDefault: 'info',    iconBg: 'bg-info/10',     iconColor: 'info',     tagBg: 'bg-info/10',     tagText: 'text-info-dark',     tagDot: 'bg-info'     },
} %}

{% set config   = variantConfig[variant] ?? variantConfig['success'] %}
{% set iconName = icon ?? config.iconDefault %}

{# ── Rendu ───────────────────────────────────────────────────────────────── #}
<div class="bg-white rounded-2xl border border-gray-200/60 shadow-lg shadow-gray-200/50 {{ class }}">

    {# Contenu #}
    <div class="px-6 py-10 sm:px-10">

        {# Icône : cercle semi-transparent avec icône colorée (tokens design system) #}
        <div class="flex justify-center mb-5">
            <div class="w-14 h-14 rounded-full {{ config.iconBg }} flex items-center justify-center">
                {% include '_atoms/icon/icon.html.twig' with {
                    name:  iconName,
                    size:  'xl',
                    color: config.iconColor
                } only %}
            </div>
        </div>

        {# Titre #}
        <h1 class="text-xl font-bold text-gray-900 text-center mb-3">{{ title }}</h1>

        {# Badge/tag — valeur clé mise en avant #}
        {% if tag %}
            <div class="flex justify-center mb-5">
                <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-semibold {{ config.tagBg }} {{ config.tagText }}">
                    <span class="w-1.5 h-1.5 rounded-full {{ config.tagDot }} shrink-0"></span>
                    {{ tag }}
                </span>
            </div>
        {% endif %}

        {# Description #}
        {% if descriptionHtml %}
            <p class="text-sm text-gray-500 leading-relaxed text-center mb-8">{{ descriptionHtml|raw }}</p>
        {% elseif description %}
            <p class="text-sm text-gray-500 leading-relaxed text-center mb-8">{{ description }}</p>
        {% endif %}

        {# Actions — toujours empilés verticalement : chaque bouton pleine largeur
           respecte naturellement le padding de la card sans déborder #}
        {% if primaryLabel or secondaryLabel %}
            <div class="flex flex-col gap-2.5">
                {% if primaryLabel %}
                    {% include '_atoms/button/button.html.twig' with {
                        label:   primaryLabel,
                        icon:    primaryIcon,
                        href:    primaryHref,
                        variant: 'primary',
                        size:    'md',
                        width:   'full'
                    } only %}
                {% endif %}
                {% if secondaryLabel %}
                    {% include '_atoms/button/button.html.twig' with {
                        label:   secondaryLabel,
                        href:    secondaryHref,
                        variant: secondaryVariant,
                        size:    'md',
                        width:   'full'
                    } only %}
                {% endif %}
            </div>
        {% endif %}

    </div>
</div>