<template>
  <b-button
    block
    class="
      d-flex
      btn shadow-none
      align-items-center
      border-0
      btn-hover
      btn-nav"
    @click="goTo"
  >
    <div class="d-flex flex-fill  align-items-center">
     
      <div class="akkurat-bold btn-text">
         <img v-if="title === 'Super Class'" height="14px" src="@/assets/svgs/Logo_Programa Super Class.svg" alt="Odorata">
        {{ title }}
        </div>
    </div>
  </b-button>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    icon: {
      type: String,
    },
    routerName: {
      type: String,
    },
  },
  methods: {
    goTo() {

if(this.title === 'Super Class'){
    window.open("http://www.odorata.com.br/super-class");
    return;
}

      if (this.$router.history.current.name === this.routerName) {
        return;
      }
      this.$router.push({ name: this.routerName });
    },
  },
};
</script>

<style scoped>
.btn-hover:hover {
  background: #ED8626;
}

.btn-nav {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5)
}

.btn-text{
  text-align: center;
    display: block;
    width: 100%;
}
</style>
