{% load lb_tags %}
<c-vars
    class=""
    as="span"
    variant=""
    size=""
    underline
    :variantClasses="{
        'neutral': 'text-neutral',
        'primary': 'text-primary',
        'secondary': 'text-secondary',
        'accent': 'text-accent',
        'info': 'text-info',
        'success': 'text-success',
        'warning': 'text-warning',
        'error': 'text-error'
    }"
    :sizeClasses="{
        'xs': 'text-xs',
        'sm': 'text-sm',
        'md': 'text-base',
        'lg': 'text-lg',
        'xl': 'text-xl',
        '2xl': 'text-2xl',
        '3xl': 'text-3xl',
        '4xl': 'text-4xl'
    }"
/>
{% parse_icon attrs as i %}

<{{ as }}
    class="
        {% if i.name %}flex items-center gap-2{% endif %}
        {{ variantClasses|get_dict_item:variant }}
        {{ sizeClasses|get_dict_item:size }}
        {% if underline %}underline{% endif %}
        {{ class }}
    "
    {{ attrs|strip_icon_attrs }}
>
    {% if i.name and not i.end %}
        <c-component is="lbi" n="{{ i.name }}" w="1em" h="1em" :fill=i.fill class="{{ i.css_class }}" />
    {% endif %}
    {{ slot }}
    {% if i.name and i.end %}
        <c-component is="lbi" n="{{ i.name }}" w="1em" h="1em" :fill=i.fill class="{{ i.css_class }}" />
    {% endif %}
</{{ as }}>