<script setup>
import { books } from '@/components/buecherdatenbank' // Importiere die Bücher-Datenbank
import Fieberkurve from "@/components/Fieberkurve.vue"

// Erzeuge die Datenstruktur für die Tabelle
const tableData = books.map(book => ({
  id: book.id,
  title: book.title,
  description: book.description,
  image: book.image,
  fieberkurve: book.fieberkurve,
}))

// Definiere die Header der Tabelle
const headers = [
  {
    title: 'ID',
    key: 'id',
    sortable: true,
  },
  {
    title: 'Titel',
    key: 'title',
    sortable: true,
  },
  {
    title: 'Beschreibung',
    key: 'description',
    sortable: false,
  },
  {
    title: 'Bild',
    key: 'image',
    sortable: false,
  },
  {
    title: 'Fieberkurve',
    key: 'fieberkurve',
    sortable: false,
  },
]
</script>

<template>
  <h2>Bücherdatenbank:</h2>
  <p>(Alle statisch angelegten Testbücher in "buecherdatenbank.js")</p>
  <hr>

  <!-- Data Table - Dense -->
  <VDataTable
    :headers="headers"
    :items="tableData"
    density="compact"
    :items-per-page="5"
  >
    <!-- Custom Slot für Bild -->
    <template #item.image="{ item }">
      <img :src="item.image" alt="Buchbild" style="width: 50px; height: auto;" />
    </template>

    <!-- Custom Slot für Fieberkurve -->
    <template #item.fieberkurve="{ item }">
      <Fieberkurve :data="item.fieberkurve" />
    </template>
  </VDataTable>
</template>

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