<template>
    <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
        <table class="w-full text-left text-sm">
            <thead class="border-b border-neutral-200 bg-neutral-50">
                <tr>
                    <th
                        v-for="col in columns"
                        :key="col.key"
                        class="px-4 py-3 font-semibold text-neutral-700"
                    >
                        {{ col.label }}
                    </th>
                    <th v-if="deletable" class="px-4 py-3 font-semibold text-neutral-700">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr
                    v-for="item in items"
                    :key="item.id"
                    class="cursor-pointer border-b border-neutral-100 hover:bg-neutral-50"
                    @click="$emit('row-click', item)"
                >
                    <td
                        v-for="col in columns"
                        :key="col.key"
                        class="px-4 py-3"
                        :class="[col.class, { 'font-semibold text-primary-500': col.primary }]"
                    >
                        <slot :name="`cell-${col.key}`" :item="item" :value="item[col.key]">
                            {{ item[col.key] }}
                        </slot>
                    </td>
                    <td v-if="deletable" class="px-4 py-3">
                        <button
                            class="text-red-500 hover:text-red-700"
                            @click.stop="$emit('delete', item)"
                        >
                            <Icon name="mdi:delete-outline" size="20" />
                        </button>
                    </td>
                </tr>
                <tr v-if="items.length === 0 && !loading">
                    <td
                        :colspan="columns.length + (deletable ? 1 : 0)"
                        class="px-4 py-8 text-center text-neutral-400"
                    >
                        {{ emptyMessage }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
export interface DataTableColumn {
    key: string
    label: string
    primary?: boolean
    class?: string
}

defineProps<{
    columns: DataTableColumn[]
    items: Record<string, any>[]
    loading?: boolean
    emptyMessage?: string
    deletable?: boolean
}>()

defineEmits<{
    (e: 'row-click', item: any): void
    (e: 'delete', item: any): void
}>()
</script>
