<template>
  <div class="p-4 sm:p-6 rounded-lg overflow-x-auto" :style="{ backgroundColor: tableBgColor }">
    <table class="min-w-full divide-y" :class="[`divide-[var(${props.accentColor})]`]" :style="{ backgroundColor: tableBgColor }">
      <thead :class="[`divide-y divide-[var(${props.accentColor})]`]" :style="{ backgroundColor: tableBgColor }">
        <tr>
          <th v-for="column in columns" :key="column.key" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
            {{ column.label }}
          </th>
          <th v-if="hasActionSlot" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
            Acciones
          </th>
        </tr>
      </thead>
      <tbody class="divide-y" :class="[`divide-[var(${props.accentColor})]`]" :style="{ backgroundColor: tableBgColor }">
        <tr v-if="!items || items.length === 0">
          <td :colspan="columns.length + (hasActionSlot ? 1 : 0)" class="px-6 py-10 text-center text-gray-500 dark:text-slate-400 text-lg">
            No hay datos para mostrar.
          </td>
        </tr>
        <tr
          v-for="(item, index) in items"
          :key="item.id || index"
          class="transition-colors duration-150 ease-in-out hover:bg-[var(--row-hover-color)]/10 dark:hover:bg-[var(--row-hover-color)]/20"
          :style="{ '--row-hover-color': `var(${props.accentColor})` }"
        >
          <td v-for="column in columns" :key="column.key" class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">
            <slot :name="`cell-${column.key}`" :item="item" :index="index">
              {{ item[column.key] }}
            </slot>
          </td>
          <td v-if="hasActionSlot" class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
            <slot name="actions" :item="item" :index="index"></slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, useSlots } from 'vue';
import { useUi } from '../../stores/useUi';

const props = defineProps({
  columns: { type: Array, required: true, default: () => [] },
  items: { type: Array, required: true, default: () => [] },
  accentColor: { type: String, required: true }, // Example: '--accent-color-empleados'
  tableBgColorName: { type: String, required: true }, // Example: 'tableBgColorEmpleados'
});

const emit = defineEmits(['editItem', 'deleteItem']); // Define the emits that can be triggered

const ui = useUi();
const slots = useSlots();

const tableBgColor = computed(() => {
  return ui[props.tableBgColorName] || 'transparent'; // Default to transparent if not found
});

const hasActionSlot = computed(() => {
  // Check if the actions slot has content
  return !!slots.actions;
});
</script>
