<script setup lang="ts">
import type {Book} from "@/services/models/book";

defineProps<{ book: Book }>()
</script>

<template>
  <v-card
    width="100%"
    hover
    height="120px"
    rounded="lg"
    color="white"
    :to="`book/${book.id}`"
  >
    <div class="d-flex ga-1">
      <v-avatar
        rounded="lg"
        size="120"
      >
        <v-img
          :src="book.image_url ?? `https://cdn.vuetifyjs.com/images/cards/sunshine.jpg`"
        />
      </v-avatar>
      <div class="book-information">
        <div class="book-author-title ">
          <p
            v-if="book.product_title"
            class="text-primary font-weight-bold"
          >
            {{ book.product_title }}
          </p>
          <p
            v-if="book.author"
            class="text-secondary font-weight-medium text-capitalize"
          >
            {{ book.author.split("_").join(" ") }}
          </p>
        </div>
        <v-chip-group
          variant="flat"
          column
        >
          <v-chip
            class="ma-2"
            label
            size="x-small"
          >🗓️
            {{ book.date_de_parution }}
          </v-chip>
          <v-chip
            class="ma-2"
            label
            size="x-small"
          >
            📚 {{ book.nb_de_pages }} pages
          </v-chip>
        </v-chip-group>
      </div>
    </div>
  </v-card>
</template>

<style scoped>
.book-information {
  max-height: 120px;
}

.book-author-title {
  padding: 4px 4px 0 4px;

  > * {
    padding: 0 2px;
    font-size: 16px;
    text-wrap: wrap;
    line-height: 1em;
    max-height: 2em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
</style>
