<script>


import { restaurantStore } from '@/PiniaStores/restaurantStore.js'

export default {
  data(){
    return {
      restaurant:{
        name: '',
        address: ''
      },
      restaurantStore: restaurantStore()
    }
  }
}

</script>

<template>
    <div id="container" class="px-5 py-2">
      <div>{{restaurantStore.logo}}</div>
      <p>{{restaurantStore.name}}</p>
      <p>Working hours: {{restaurantStore.workingHours}}</p>
      <p>Address: {{restaurantStore.address}}</p>

      <p>Average rating...{{restaurantStore.averageRating}}</p>
      <router-link to="/more_details">
      <button class="btn btn-dark">More details</button>
      </router-link>
      <button class="btn btn-dark ms-2">Make reservation</button>
    </div>
</template>

<style scoped>

#container {

  font-size: 20px;
  margin: 30px auto;
  border: transparent;
  /*border-radius: 10px;*/
  border-left: 3px solid #8377D1;
  background-color: #FBFFF1;


}

</style>
