{#
 # ============================================================================
 # ATOM: LINK
 # ============================================================================
 #
 # Lien stylisé paramétrable utilisant 100% Tailwind CSS.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre | Type    | Défaut    | Description                              |
 # |-----------|---------|-----------|------------------------------------------|
 # | href      | string  | '#'       | URL du lien                              |
 # | label     | string  | ''        | Texte du lien                            |
 # | target    | string  | null      | Target (_blank, etc.)                    |
 # | variant   | string  | 'primary' | Style: primary, dark, muted, danger      |
 # | size      | string  | 'md'      | Taille: sm, md, lg                       |
 # | underline | string  | 'hover'   | Soulignement: none, hover, always        |
 # | icon      | string  | null      | Nom de l'icône                           |
 # | iconPosition | string | 'right' | Position: left, right                    |
 # | iconAnimate | bool    | false    | Animation hover sur l'icône              |
 # | disabled  | bool    | false     | Lien désactivé                           |
 # | class     | string  | ''        | Classes additionnelles                   |
 # | attr      | object  | {}        | Attributs HTML additionnels              |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Lien simple:
 # {% include '_atoms/link/link.html.twig' with {
 #     href: '/contact',
 #     label: 'Contactez-nous'
 # } %}
 #
 # Lien externe avec icône:
 # {% include '_atoms/link/link.html.twig' with {
 #     href: 'https://example.com',
 #     label: 'Voir le site',
 #     target: '_blank',
 #     icon: 'external-link'
 # } %}
 #
 # Lien retour avec animation:
 # {% include '_atoms/link/link.html.twig' with {
 #     href: '/dashboard',
 #     label: 'Retour',
 #     variant: 'muted',
 #     icon: 'arrow-left',
 #     iconPosition: 'left',
 #     iconAnimate: true
 # } %}
 #
 # ============================================================================
 #}

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

{% set href = href ?? '#' %}
{% set label = label ?? '' %}
{% set target = target ?? null %}
{% set variant = variant ?? 'primary' %}
{% set size = size ?? 'md' %}
{% set underline = underline ?? 'hover' %}
{% set icon = icon ?? null %}
{% set iconPosition = iconPosition ?? 'right' %}
{% set iconAnimate = iconAnimate ?? false %}
{% set disabled = disabled ?? false %}
{% set class = class ?? '' %}
{% set attr = attr ?? {} %}

{# ============================================================================
   CLASSES TAILWIND - BASE
   ============================================================================ #}

{% set baseClasses = 'inline-flex items-center gap-1 font-medium transition-colors duration-base' ~ (iconAnimate ? ' group' : '') %}

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

{% set variantClasses = {
    'primary': 'text-primary hover:text-primary-dark',
    'dark': 'text-gray-700 hover:text-gray-900',
    'muted': 'text-gray-500 hover:text-gray-700',
    'danger': 'text-error hover:text-error-dark',
    'success': 'text-success hover:text-success-dark',
    'white': 'text-white hover:text-white/80'
} %}

{# ============================================================================
   CLASSES TAILWIND - TAILLES
   ============================================================================ #}

{% set sizeClasses = {
    'sm': 'text-sm',
    'md': 'text-base',
    'lg': 'text-lg'
} %}

{% set iconSizes = {
    'sm': 'xs',
    'md': 'sm',
    'lg': 'md'
} %}

{# ============================================================================
   CLASSES TAILWIND - UNDERLINE
   ============================================================================ #}

{% set underlineClasses = {
    'none': 'no-underline',
    'hover': 'no-underline hover:underline underline-offset-2',
    'always': 'underline underline-offset-2'
} %}

{# ============================================================================
   CLASSES TAILWIND - ÉTATS
   ============================================================================ #}

{% set disabledClasses = disabled ? 'opacity-50 pointer-events-none cursor-not-allowed' : '' %}

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

{% set linkClasses = [
    baseClasses,
    variantClasses[variant] ?? variantClasses['primary'],
    sizeClasses[size] ?? sizeClasses['md'],
    underlineClasses[underline] ?? underlineClasses['hover'],
    disabledClasses,
    class
]|join(' ')|trim %}

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

<a
    href="{{ href }}"
    {% if target %}target="{{ target }}"{% endif %}
    {% if target == '_blank' %}rel="noopener noreferrer"{% endif %}
    {% if disabled %}aria-disabled="true" tabindex="-1"{% endif %}
    class="{{ linkClasses }}"
    {% for key, val in attr %}{{ key }}="{{ val }}"{% endfor %}
>
    {# Icône gauche #}
    {% if icon and iconPosition == 'left' %}
        <span class="{{ iconAnimate ? 'transition-transform duration-300 group-hover:-translate-x-1' : '' }}">
            {% include '_atoms/icon/icon.html.twig' with {
                name: icon,
                size: iconSizes[size] ?? 'sm',
                class: 'shrink-0'
            } only %}
        </span>
    {% endif %}

    {# Label #}
    {% if label %}
        <span>{{ label }}</span>
    {% endif %}

    {# Icône droite #}
    {% if icon and iconPosition == 'right' %}
        <span class="{{ iconAnimate ? 'transition-transform duration-300 group-hover:translate-x-1' : '' }}">
            {% include '_atoms/icon/icon.html.twig' with {
                name: icon,
                size: iconSizes[size] ?? 'sm',
                class: 'shrink-0'
            } only %}
        </span>
    {% endif %}
</a>