<script setup lang="ts">
import { useI18n } from 'vue-i18n';

defineProps<{
  headers: { key: string; label: string; align?: 'left' | 'right' | 'center' }[];
  items: any[];
  loading?: boolean;
}>();

const { t } = useI18n();
</script>

<template>
  <div class="data-table-container">
    <table class="data-table">
      <thead>
        <tr>
          <th
            v-for="h in headers"
            :key="h.key"
            :class="[`align-${h.align || 'left'}`]"
          >
            {{ h.label }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="loading && !items.length">
          <td :colspan="headers.length" class="loading-cell">
            <div class="skeleton-row desktop-skeleton" v-for="i in 3" :key="i"></div>
          </td>
        </tr>
        <tr v-else-if="!items.length">
          <td :colspan="headers.length" class="empty-cell">
            {{ t('common.no_data') || '暂无数据' }}
          </td>
        </tr>
        <tr
          v-else
          v-for="(item, idx) in items"
          :key="item.id || idx"
          class="table-row hover-bg"
        >
          <td
            v-for="h in headers"
            :key="h.key"
            :class="[`align-${h.align || 'left'}`]"
          >
            <slot :name="h.key" :item="item" :index="idx">
              {{ item[h.key] }}
            </slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
.data-table-container {
  width: 100%;
  overflow-x: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #ddd;
}

th {
  background: var(--bg-body);
  color: var(--text-muted);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 11px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.04em;
}

td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.table-row:last-child td {
  border-bottom: none;
}

.table-row {
  transition: background-color 0.15s;
}

.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }

.loading-cell {
  padding: 20px;
}

.skeleton-row {
  height: 28px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.skeleton-row:last-child {
  margin-bottom: 0;
}

.empty-cell {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-weight: 600;
}
</style>
