<template>
    <div class="dataTableBody">
        <table class="dataTableBody__table">
            <thead class="dataTableBody__thead">
            <tr>
                <th
                    v-for="col in columns"
                    :key="col.key"
                    class="dataTableBody__th"
                    @click="$emit('sort', col.key)"
                >
                    <div class="dataTableBody__thContent">
                        {{ col.label }}
                        <span class="dataTableBody__sortIcon">
                <template v-if="sortConfig.key === col.key">
                  <svg v-if="sortConfig.direction === 'asc'" class="dataTableBody__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>
                  <svg v-else class="dataTableBody__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
                </template>
                <span v-else class="dataTableBody__iconPlaceholder"></span>
              </span>
                    </div>
                </th>
            </tr>
            </thead>
            <tbody class="dataTableBody__tbody">
            <tr v-for="row in rows" :key="row.id" class="dataTableBody__row">
                <td class="dataTableBody__td dataTableBody__td--name">{{ row.chat }}</td>
                <td class="dataTableBody__td dataTableBody__td--email">{{ row.email }}</td>
                <td class="dataTableBody__td">
                    <button
                        class="dataTableBody__button dataTableBody__button--primary"
                        @click="$emit('view', row)"
                    >View</button>
                </td>

            </tr>
            <tr v-if="rows.length === 0">
                <td :colspan="columns.length" class="dataTableBody__td dataTableBody__td--empty">No results found</td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    name: 'DataTableBody',
    emits: ['sort', 'view'],
    props: {
        rows: {
            type: Array,
            required: true
        },
        columns: {
            type: Array,
            required: true
        },
        sortConfig: {
            type: Object,
            required: true
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../../../styles/admin/elements/table/body.less";
</style>
