<!--<script setup>
import harryPotter from "@images/harry_potter_stein_weisen_rowling.jpg";
</script>

<template>
  <VRow class="match-height">
    <VCol
      cols="12"
      md="12"
    >
      <VCard title="Detailseite">
        <VImg
          width="200px"
          height="300px"
          :src="harryPotter"
        />
      </VCard>
    </VCol>
  </VRow>
</template>

<style scoped lang="scss">

</style>-->




<script setup>
import { ref } from "vue";
import Fieberkurve from "@/components/Fieberkurve.vue";
// import HarryPotterCover from "@images/harry_potter_stein_weisen_rowling.jpg";

// Beispiel-Daten für das Buch
const book = ref({
  title: "Rich Dad Poor Dad",
  subtitle: "Was die Reichen ihren Kindern über Geld beibringen",
  authors: [{ name: "Robert T. Kiyosaki" }],
  rating: 4.5,
  reviews: 11234,
  blurb:
    "Warum bleiben die Reichen reich und die Armen arm? Weil die Reichen ihren Kindern beibringen, wie sie mit Geld umgehen müssen, und die anderen nicht! Dieses Buch zeigt, wie man finanzielle Freiheit erreichen kann.",
  genres: ["Finanzen", "Bildung", "Motivation"],
  publishers: ["Plassen Verlag"],
  pageCount: 240,
  language: "Deutsch",
  publishedDate: "2014-12",
  isbn: "9783898798822",
  format: "Taschenbuch",
  coverUrl: "https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg",
  purchaseLinks: [
    {
      name: "Amazon",
      url: "https://www.amazon.de",
      logo: "https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg",
    },
    {
      name: "Thalia",
      url: "https://www.thalia.de",
      logo: "https://upload.wikimedia.org/wikipedia/commons/8/87/Thalia_Logo.svg",
    },
    {
      name: "Hugendubel",
      url: "https://www.hugendubel.de",
      logo: "https://upload.wikimedia.org/wikipedia/commons/4/47/Hugendubel_Logo.svg",
    },
  ],
});
</script>

<template>
  <VContainer>
    <!-- Hauptkarte für Buchdetails -->
<!--    <VCard
      title="Buchdetails: {{ book.title }}"
      subtitle="{{ book.subtitle }}"
      class="mb-6"
    >-->
    <VCard
      title="Buchdetails"
      class="mb-6"
      >
      <VRow>
        <!-- Buchcover -->
        <VCol cols="12" md="4" class="text-center">
          <VImg
            :src="book.coverUrl"
            alt="Buchcover"
            max-height="400px"
            max-width="300px"
          />
        </VCol>

        <!-- Buchinformationen -->
        <VCol cols="12" md="8">
          <h2 class="mb-1">{{ book.title }}</h2>
          <h4 class="text-muted mb-4">{{ book.subtitle }}</h4>
          <h5>von {{ book.authors.map(author => author.name).join(", ") }}</h5>


          <!-- Statische Fieberkurve mit vordefinierten Werten -->
          <Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 4 }, { value: 1 }]" />

          <!-- Bewertung -->
          <div class="d-flex align-center mb-3">
            <VRating
              v-model="book.rating"
              readonly
              length="5"
              class="mr-2"
              color="yellow"
            />
            <span>({{ book.reviews }} Bewertungen)</span>
          </div>

          <!-- Beschreibung -->
          <p>{{ book.blurb }}</p>

          <!-- Zusätzliche Details -->
          <ul class="list-unstyled">
            <li><strong>Genres:</strong> {{ book.genres.join(", ") }}</li>
            <li><strong>Verlag:</strong> {{ book.publishers.join(", ") }}</li>
            <li><strong>Seitenanzahl:</strong> {{ book.pageCount }}</li>
            <li><strong>Sprache:</strong> {{ book.language }}</li>
            <li><strong>Veröffentlicht:</strong> {{ book.publishedDate }}</li>
            <li><strong>ISBN:</strong> {{ book.isbn }}</li>
            <li><strong>Format:</strong> {{ book.format }}</li>
          </ul>

          <!-- Kaufmöglichkeiten -->
          <div class="mt-4">
            <h5>Kaufen bei:</h5>
            <div class="d-flex flex-wrap">
              <VBtn
                v-for="link in book.purchaseLinks"
                :key="link.name"
                :href="link.url"
                target="_blank"
                class="ma-2"
                outlined
              >
                <VImg :src="link.logo" max-width="24px" class="mr-2" /> {{ link.name }}
              </VBtn>
            </div>
          </div>
          <br>
        </VCol>
      </VRow>
    </VCard>
  </VContainer>
</template>

<style scoped>
h2 {
  font-size: 2rem !important;
  font-weight: bold !important;
}

h4 {
  font-size: 1.5rem !important;
  margin-bottom: 1rem !important;
}

p {
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

.VImg {
  margin-right: 8px !important;
}

.VBtn {
  display: flex !important;
  align-items: center !important;
  font-size: 0.9rem !important;
}

ul {
  list-style-type: none !important;
  padding: 0 !important;
}
</style>
