<template>
  <v-app-bar app elevation="24" color="teal lighten-3">
    <v-toolbar-title class="red--text">{{$t('AppHeader.appName')}}</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn text color="red red--text" :to="btnTo">
      <v-icon left>{{ btnIconName }}</v-icon>
      <strong>{{$t(btnLabel)}}</strong>
    </v-btn>
  </v-app-bar>
</template>

<script>
export default {
  name: "app-header",
  data() {
    return {
      btnTo: null
    };
  },
  props: ["btnToProp", "btnLabel", "btnIconName"],
  created() {
    this.btnTo = "/" + this.btnToProp;
  }
};
</script>