{#
 # ============================================================================
 # MOLECULE: TIP
 # ============================================================================
 #
 # Encart d'astuce/conseil contextuel avec icone, titre et message.
 # Utilise pour les astuces, conseils et informations contextuelles.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilises)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre  | Type   | Defaut          | Description                       |
 # |------------|--------|-----------------|-----------------------------------|
 # | message    | string | required        | Contenu du conseil                |
 # | title      | string | 'Astuce'        | Titre du conseil                  |
 # | icon       | string | 'lightbulb-bolt'| Icone Solar                       |
 # | variant    | string | 'warning'       | warning, info, success, primary   |
 # | class      | string | ''              | Classes additionnelles            |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # {% include '_molecules/tip/tip.html.twig' with {
 #     message: 'Redigez un script conversationnel pour un rendu audio agreable.',
 #     title: 'Astuce',
 #     icon: 'lightbulb-bolt',
 #     variant: 'warning'
 # } only %}
 #
 # ============================================================================
 #}

{# Configuration des valeurs par defaut #}
{% set message = message ?? '' %}
{% set title = title ?? 'Astuce' %}
{% set icon = icon ?? 'lightbulb-bolt' %}
{% set variant = variant ?? 'warning' %}
{% set class = class ?? '' %}

{# Couleurs par variant #}
{% set variantStyles = {
    'warning': {
        bg: 'bg-warning/6',
        border: 'border-warning/10',
        iconBg: 'bg-warning/10',
        iconColor: 'warning',
        titleColor: 'text-warning-dark'
    },
    'info': {
        bg: 'bg-info/6',
        border: 'border-info/10',
        iconBg: 'bg-info/10',
        iconColor: 'info',
        titleColor: 'text-info'
    },
    'success': {
        bg: 'bg-success/6',
        border: 'border-success/10',
        iconBg: 'bg-success/10',
        iconColor: 'success',
        titleColor: 'text-success'
    },
    'primary': {
        bg: 'bg-primary/5',
        border: 'border-primary/10',
        iconBg: 'bg-primary/8',
        iconColor: 'primary',
        titleColor: 'text-primary'
    }
} %}

{% set styles = variantStyles[variant] ?? variantStyles['warning'] %}

<div class="flex items-start gap-3 px-4 py-3 rounded-xl {{ styles.bg }} border {{ styles.border }} {{ class }}">
    <div class="w-8 h-8 flex items-center justify-center {{ styles.iconBg }} rounded-lg flex-shrink-0 mt-0.5">
        {% include '_atoms/icon/icon.html.twig' with {
            name: icon,
            size: 'sm',
            color: styles.iconColor
        } only %}
    </div>
    <p class="text-sm text-gray-600 leading-relaxed">
        <strong class="{{ styles.titleColor }} font-semibold">{{ title }} :</strong> {{ message }}
    </p>
</div>