<script setup>
  import { computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { getImagePathOrDefault } from './api.js'
  import { VRating } from 'vuetify/components/VRating';

  const props = defineProps({
  id: Number,
  title: String,
  author: String,
  coverPath: String,
  rating: Number,
  read: Boolean
});
  const imagePathOrDefault = computed(() => getImagePathOrDefault(props.coverPath));
  const router = useRouter();

function openBook() {
  router.push(`/book/${props.id}`)
}

</script>

<template>
  <div class="box container has-background-dark" >
    <div class="media" @click="openBook">
      <div class="media-left">
        <figure class="image mb-3">
          <img v-bind:src="imagePathOrDefault" v-bind:alt="title">
        </figure>
      </div>
      <div class="media-content">
        <div class="content">
          <div class="is-size-5">{{title}}</div>
          <div class="is-size-5 is-italic">{{author}}</div>
          <VRating v-if="rating > 0"
              half-increments
              readonly
              :length="5"
              size="medium"
              :model-value="rating/2"
              active-color="bulma-body-color"
              />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
img {
  max-height:100px;
  max-width:100px;
  height:auto;
  width:auto;
}

.box {
  transition:ease-in-out 0.04s;
  margin-bottom: 15px;
}

.box:hover {
  transform: scale(1.01);
  transition: ease-in-out 0.02s;
}

</style>
