{# templates/components/ToolbarButton.html.twig #}
{% set buttonAttributes = {} %}

{% if data is defined and data is not empty %}
    {% for key, value in data %}
        {% set dataAttribute = 'data-' ~ key|replace({'_': '-'})|lower ~ '=' ~ value %}
        {% set buttonAttributes = buttonAttributes|merge({dataAttribute}) %}
    {% endfor %}
{% endif %}

<div {{ attributes }}>
    <button class="flex flex-col justify-around min-h-14 w-min ml-4 items-center text-white group"
        {% if action %}
            data-action="{{ action }}"
        {% endif %}
        {{ buttonAttributes|join(' ') }}
    >
        <i data-toolbar-target="icon" class="fas fa-{{ icon }} text-xl group-hover:text-green-500"></i>
        <span class="text-xs">{{ text }}</span>
    </button>
</div>