<template>
  <transition name="fade" mode="out-in" :duration="100">
    <Button
      :key="disabled + text"
      :text="text"
      class="rounded-full h-8"
      @btnClicked="handleCliCkBtn"
      border="border-0"
      :class="[
        disabled ? 'darkBtn' : 'bg-font-blue',
        disabled ? 'darkBtn' : ' text-white ',
      ]"
    >
      <template #icon-right>
        <img
          v-if="!disabled"
          class="ml-2"
          src="@/assets/icons/arrow-right.png"
          alt="arrow-right"
        />
        <img
          v-else
          class="ml-2"
          src="@/assets/icons/arrow-right-dark.png"
          alt="arrow-right"
        />
      </template>
    </Button>
  </transition>
</template>

<script lang="ts">
import Button from "@/components/common/Btn.vue";
import Vue from "vue";
export default Vue.extend({
  components: {
    Button,
  },
  props: {
    text: String,
    disabled: Boolean,
  },
  methods: {
    handleCliCkBtn(e: MouseEvent) {
      if (this.disabled) return;
      this.$emit("click", e);
    },
  },
});
</script>

<style>
.darkBtn {
  background: #1d2649;
  color: #8899b3;
}
</style>
