<script setup lang="ts">
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'

defineProps<{
  rows: unknown[]
  cols: object
  header: object[]
  keys: string[]
  funcParsed: object
  funcHtml: object
  funcComponent: object
}>()
</script>

<template>
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead
          v-for="(h, idx) in header[0]"
          :key="`head-${idx}`"
          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
        >
          {{ h.label }}
        </TableHead>
      </TableRow>
    </TableHeader>

    <TableBody>
      <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">
          <!-- If funcComponent has a renderer -->
          <component
            :is="funcComponent[key](row, rowIndex).component"
            v-if="funcComponent[key]"
            v-bind="funcComponent[key](row, rowIndex)"
          />
          <!-- If funcParsed or funcHtml returns a value -->
          <template v-else>
            {{ funcParsed[key]?.(row) ?? funcHtml[key]?.(row) ?? row[key] }}
          </template>
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
</template>
