{# templates/components/ToolbarButton.html.twig #}
{% set buttonAttributes = {} %}
{% set buttonClass = 'text-white' %}
{% if data is defined and data is not empty %}
    {% for key, value in data %}
        {% set dataKey = 'data-' ~ key|replace({'_': '-'})|lower %}
        {% set buttonAttributes = buttonAttributes|merge({ (dataKey): value }) %}
    {% endfor %}
    {% if data['buttonClass'] is defined %}
        {% set buttonClass = data['buttonClass'] %}
    {% endif %}
{% endif %}

<div {{ attributes }}>
    <button class="flex flex-col justify-around min-h-14 w-min ml-4 items-center group {{ buttonClass }}"
            data-controller="{{ controller }}"
            data-action="{{ action }}"
    {% for attrName, attrValue in buttonAttributes %}
        {{ attrName }}="{{ attrValue }}"
    {% endfor %}
    >
    <i data-{{ controller }}-target="icon" class="fas fa-{{ icon }} text-xl group-hover:text-green-500"></i>
    <span data-{{ controller }}-target="text" class="text-xs">{{ text }}</span>
    </button>
</div>