<script setup lang="ts" generic="TRow extends object">
type Column = { key: string; label: string; align?: 'left' | 'center' | 'right' }

defineProps<{
  columns: Column[]
  rows: TRow[]
}>()

defineSlots<Record<string, (props: { row: TRow; value: unknown }) => unknown>>()

function getCell(row: TRow, key: string): unknown {
  return (row as Record<string, unknown>)[key]
}
</script>

<template>
  <div class="table-wrap">
    <table class="data-table">
      <thead>
        <tr>
          <th v-for="col in columns" :key="col.key" :class="`align-${col.align ?? 'left'}`">
            {{ col.label }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, i) in rows" :key="i">
          <td v-for="col in columns" :key="col.key" :class="`align-${col.align ?? 'left'}`">
            <slot :name="col.key" :row="row" :value="getCell(row, col.key)">
              {{ getCell(row, col.key) }}
            </slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th {
  background: var(--color-white-a60);
  border-bottom: 2px solid var(--color-border-glass);
  padding: 10px 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-glass);
  color: var(--color-text);
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table tbody tr:hover td {
  background: var(--color-primary-a05);
}
.align-left {
  text-align: left;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}
</style>
