<script setup>
  import { ref } from 'vue'
  import { getAuthor } from './api.js'
  import { onBeforeRouteUpdate } from 'vue-router'
  import SearchBook from './SearchBook.vue'


  const props = defineProps({
    id: String
  });

  let author = ref(null);
  let authorfetcherror = ref(null);

  getAuthor(author, authorfetcherror, props.id);

  onBeforeRouteUpdate(async (to, from) => {
    getAuthor(author, authorfetcherror, to.params.id);
  })
</script>

<template>
  <div v-if="authorfetcherror">{{$t('authorform.error', {err: authorfetcherror.message})}}</div>
  <div v-if="author">
    <h3 class="title">{{author.name}}</h3>
    <p v-if="author.description">{{author.description}}</p>
  </div>
  <div class="mt-6">
    <SearchBook :author-id="id"/>
  </div>
</template>

<style scoped>
</style>
