{#
 # ============================================================================
 # ATOM: TYPOGRAPHY
 # ============================================================================
 #
 # Composant texte paramétrable utilisant 100% Tailwind CSS.
 # Gère les titres (h1-h6), paragraphes, labels et textes stylisés.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre | Type    | Défaut    | Description                              |
 # |-----------|---------|-----------|------------------------------------------|
 # | text      | string  | ''        | Contenu textuel                          |
 # | tag       | string  | 'p'       | Balise HTML: h1-h6, p, span, label       |
 # | variant   | string  | 'body'    | Style: display, h1-h6, body, small, etc. |
 # | weight    | string  | null      | Graisse: light, normal, medium, semibold,|
 # |           |         |           | bold, extrabold (surcharge la variante)  |
 # | color     | string  | 'default' | Couleur: default, muted, primary,        |
 # |           |         |           | gradient (dégradé bleu), etc.            |
 # | align     | string  | null      | Alignement: left, center, right          |
 # | class     | string  | ''        | Classes additionnelles                   |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Titre principal:
 # {% include '_atoms/typography/typography.html.twig' with {
 #     text: 'Bienvenue sur Bubul',
 #     tag: 'h1',
 #     variant: 'h1'
 # } %}
 #
 # Sous-titre:
 # {% include '_atoms/typography/typography.html.twig' with {
 #     text: 'Gérez vos formations en toute simplicité',
 #     variant: 'lead',
 #     color: 'muted'
 # } %}
 #
 # Texte de label:
 # {% include '_atoms/typography/typography.html.twig' with {
 #     text: 'Email',
 #     tag: 'label',
 #     variant: 'label'
 # } %}
 #
 # Texte avec dégradé:
 # {% include '_atoms/typography/typography.html.twig' with {
 #     text: 'Bubul',
 #     tag: 'span',
 #     variant: 'h1',
 #     color: 'gradient'
 # } %}
 #
 # ============================================================================
 #}

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

{% set text = text ?? '' %}
{% set tag = tag ?? 'p' %}
{% set variant = variant ?? 'body' %}
{% set weight = weight ?? null %}
{% set color = color ?? 'default' %}
{% set align = align ?? null %}
{% set class = class ?? '' %}

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

{% set variantClasses = {
    'display': 'text-5xl md:text-6xl font-bold tracking-tight font-[Poppins]',
    'h1': 'text-3xl md:text-4xl font-bold tracking-tight font-[Poppins]',
    'h2': 'text-2xl md:text-3xl font-bold font-[Poppins]',
    'h3': 'text-xl md:text-2xl font-semibold font-[Poppins]',
    'h4': 'text-lg md:text-xl font-semibold font-[Poppins]',
    'h5': 'text-base md:text-lg font-semibold',
    'h6': 'text-sm md:text-base font-semibold',
    'lead': 'text-lg md:text-xl font-normal leading-relaxed',
    'body': 'text-base font-normal leading-relaxed',
    'body-sm': 'text-sm font-normal leading-relaxed',
    'small': 'text-xs font-normal',
    'caption': 'text-xs font-medium uppercase tracking-wider',
    'label': 'text-sm font-medium',
    'overline': 'text-xs font-semibold uppercase tracking-widest'
} %}

{# ============================================================================
   CLASSES TAILWIND - COULEURS
   ============================================================================ #}

{% set colorClasses = {
    'default': 'text-gray-900',
    'muted': 'text-gray-500',
    'light': 'text-gray-400',
    'primary': 'text-primary',
    'secondary': 'text-secondary',
    'success': 'text-success',
    'error': 'text-error',
    'warning': 'text-warning',
    'info': 'text-info',
    'cohorts': 'text-cohorts',
    'white': 'text-white',
    'inherit': 'text-inherit',
    'gradient': 'bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent'
} %}

{# ============================================================================
   CLASSES TAILWIND - GRAISSES
   ============================================================================ #}

{% set weightClasses = {
    'light': 'font-light',
    'normal': 'font-normal',
    'medium': 'font-medium',
    'semibold': 'font-semibold',
    'bold': 'font-bold',
    'extrabold': 'font-extrabold'
} %}

{# ============================================================================
   CLASSES TAILWIND - ALIGNEMENTS
   ============================================================================ #}

{% set alignClasses = {
    'left': 'text-left',
    'center': 'text-center',
    'right': 'text-right'
} %}

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

{% set typographyClasses = [
    variantClasses[variant] ?? variantClasses['body'],
    colorClasses[color] ?? colorClasses['default'],
    weight ? (weightClasses[weight] ?? '') : '',
    align ? (alignClasses[align] ?? '') : '',
    class
]|join(' ')|trim %}

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

{% if tag == 'h1' %}
    <h1 class="{{ typographyClasses }}">{{ text|raw }}</h1>
{% elseif tag == 'h2' %}
    <h2 class="{{ typographyClasses }}">{{ text|raw }}</h2>
{% elseif tag == 'h3' %}
    <h3 class="{{ typographyClasses }}">{{ text|raw }}</h3>
{% elseif tag == 'h4' %}
    <h4 class="{{ typographyClasses }}">{{ text|raw }}</h4>
{% elseif tag == 'h5' %}
    <h5 class="{{ typographyClasses }}">{{ text|raw }}</h5>
{% elseif tag == 'h6' %}
    <h6 class="{{ typographyClasses }}">{{ text|raw }}</h6>
{% elseif tag == 'span' %}
    <span class="{{ typographyClasses }}">{{ text|raw }}</span>
{% elseif tag == 'label' %}
    <label class="{{ typographyClasses }}">{{ text|raw }}</label>
{% else %}
    <p class="{{ typographyClasses }}">{{ text|raw }}</p>
{% endif %}