<script setup>
import BookCard from './BookCard.vue';
import { getBooks } from './api.js'

const { data, error } = getBooks();

</script>

<template>
  <div class="books">

    <div v-if="error">Error when loading books: {{ error.message }}</div>
    <div class="book" v-else-if="data" v-for="book in data" :key="book.id">
      <BookCard v-bind="book" />
    </div>
  <div v-else>Loading...</div>
  </div>
</template>

<style scoped>

.books {
	position:relative;
	float:left;
	width:100%; height:auto;
	padding-bottom: 100px;
  line-height: 2.5;

  column-count: 4;
  column-gap: 15px;
}

#book {
  width: 100% !important;
  height: auto !important;
  transition: ease-in-out 0.15s;
}
</style>
