{# Table Component #}
{% set tableClass = class|default('') %}
{% set responsive = responsive|default(true) %}

<div class="{% if responsive %}overflow-x-auto{% endif %} {{ tableClass }}">
    <table class="table">
        {% if headers is defined %}
        <thead class="table-header">
            <tr>
                {% for header in headers %}
                <th scope="col" class="table-th">
                    {{ header|raw }}
                </th>
                {% endfor %}
            </tr>
        </thead>
        {% endif %}

        <tbody class="bg-white divide-y divide-secondary-200">
            {{ rows|raw }}
        </tbody>

        {% if footer is defined %}
        <tfoot class="bg-secondary-50">
            {{ footer|raw }}
        </tfoot>
        {% endif %}
    </table>
</div>