<script setup>
import { genres } from '@/components/genredatenbank' // Importiere die Genres-Datenbank

// Erzeuge eine neue Datenstruktur mit IDs
const tableData = genres.map((genre, index) => ({
  id: index + 1, // Füge eine ID hinzu
  name: genre.value, // Nutze den "value"-Schlüssel für den Namen
  icon: genre.icon.icon, // Icon-Daten
  iconSize: genre.icon.size, // Icon-Größe
}))

// Definiere die Header der Tabelle
const headers = [
  {
    title: 'ID',
    key: 'id',
    sortable: true,
  },
  {
    title: 'Genre-Name',
    key: 'name',
    sortable: true,
  },
  {
    title: 'Icon',
    key: 'icon',
    sortable: false,
  },
]
</script>

<template>
  <h2>Genredatenbank:</h2>
  <p>(Alle statisch angelegten Genres in "genredatenbank.js")</p>
  <hr>
  <br>

  <!-- Data Table - Dense -->
  <VDataTable
    :headers="headers"
    :items="tableData"
    density="compact"
    :items-per-page="10"
  >
    <!-- Custom Slot für Icons -->
    <template #item.icon="{ item }">
      <span :class="item.icon" :style="{ fontSize: `${item.iconSize}px` }"></span>
    </template>
  </VDataTable>
</template>

<style scoped lang="scss">
</style>
