{#
 # ============================================================================
 # MOLECULE: ALERT
 # ============================================================================
 #
 # Message d'alerte/notification avec icône et action de fermeture optionnelle.
 # Utilisé pour feedback utilisateur : succès, erreur, warning, info.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _atoms/typography/typography.html.twig
 # - _atoms/button/button.html.twig (close)
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre   | Type    | Défaut  | Description                              |
 # |-------------|---------|---------|------------------------------------------|
 # | title       | string  | (requis)| Titre principal en gras                  |
 # | message     | string  | (requis)| Sous-titre / message descriptif          |
 # | variant     | string  | 'info'  | success, error, warning, info, neutral   |
 # | icon        | string  | auto    | Icône (auto selon variant si null)       |
 # | dismissible | bool    | false   | Afficher bouton de fermeture             |
 # | duration    | number  | null    | Auto-dismiss après X secondes (null=off) |
 # | size        | string  | 'md'    | Taille: sm, md, lg                       |
 # | class       | string  | ''      | Classes additionnelles                   |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Alert basique:
 # {% include '_molecules/alert/alert.html.twig' with {
 #     title: 'Succès',
 #     message: 'Votre opération a été réalisée avec succès.',
 #     variant: 'success'
 # } %}
 #
 # Alert avec fermeture:
 # {% include '_molecules/alert/alert.html.twig' with {
 #     title: 'Attention',
 #     message: 'Cette action est irréversible.',
 #     variant: 'warning',
 #     dismissible: true
 # } %}
 #
 # ============================================================================
 #}

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

{% set message = message ?? '' %}
{% set title = title ?? null %}
{% set variant = variant ?? 'info' %}
{% set icon = icon ?? null %}
{% set dismissible = dismissible ?? false %}
{% set duration = duration ?? null %}
{% set size = size ?? 'md' %}
{% set class = class ?? '' %}

{# ID unique pour le JavaScript #}
{% set alertId = 'alert-' ~ random() %}

{# ============================================================================
   CONFIGURATION DES VARIANTES
   Style identique au toast - classes statiques pour Tailwind
   ============================================================================ #}

{# Icône par défaut selon variante #}
{% set defaultIcons = {
    'success': 'check-circle',
    'error': 'alert',
    'warning': 'warning',
    'info': 'info',
    'neutral': 'info'
} %}
{% set alertIcon = icon ?? (defaultIcons[variant] ?? 'info') %}

{# ============================================================================
   CLASSES TAILWIND
   ============================================================================ #}

{% set sizeConfig = {
    'sm': {
        'padding': 'p-3',
        'gap': 'gap-2.5',
        'iconBox': 'w-8 h-8 rounded-md',
        'iconSize': 'sm',
        'titleSize': 'text-sm',
        'messageSize': 'text-xs'
    },
    'md': {
        'padding': 'p-4',
        'gap': 'gap-3',
        'iconBox': 'w-10 h-10 rounded-lg',
        'iconSize': 'md',
        'titleSize': 'text-base',
        'messageSize': 'text-sm'
    },
    'lg': {
        'padding': 'p-5',
        'gap': 'gap-4',
        'iconBox': 'w-12 h-12 rounded-lg',
        'iconSize': 'lg',
        'titleSize': 'text-lg',
        'messageSize': 'text-base'
    }
} %}

{% set sizeConf = sizeConfig[size] ?? sizeConfig['md'] %}

<p class="text-gray-400 {{ sizeConf.messageSize }} leading-normal {{ class }}" role="alert">{{ message|raw }}</p>