<template>
  <div>
    <h1 v-if="searchTerm" v-html="'Book search: '+searchTerm"></h1>
    <h1 v-else>Book list</h1>
  </div>
</template>

<script>
import {EventBus} from "../event-bus";

export default {
  name: 'BookListingHeader',
  data() {
    return {
      searchTerm: null,
    }
  },
  created() {
    window.EventBus.$on('updateBookListingHeader', (data) => {
      this.searchTerm = data.searchTerm;
    });
  },
  mounted() {
    const urlParams = new URLSearchParams(window.location.search);
    this.searchTerm = urlParams.get('search') || "";
  }
}
</script>