<template>
  <a
    v-if="isShowAlert"
    class="pl-alert-vip"
    @click="openPayment"
  >
    <Icon
      class="pl-alert-vip__icon"
      type="ios-flame-outline"
    />
    <span class="pl-alert-vip__text">
      {{ alertText }}
    </span>
  </a>
</template>

<script>
import { priceMonth } from '@/config/pricing';

export default {
  name: 'HotDeal',
  methods: {
    openPayment() {
      this.$router.push({
        name: 'UpgradePlan',
        query: {
          plan: 'Vip',
        },
      });
    },
  },
  computed: {
    isShowAlert() {
      return !(this.getIsAuthed && this.getIsPaidPlan);
    },
    alertText() {
      return this.$t('ALERT_REQUIRED_PLAN_VIP', {
        price: priceMonth,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/vue/styles/tokens.scss';

.pl-alert-vip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: $radius-sm;
  border: 1px solid $c-brand;
  background-color: $c-brand;
  color: $c-surface;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color $motion-fast, border-color $motion-fast;

  &:hover {
    background-color: $c-brand-hover;
    border-color: $c-brand-hover;
    color: $c-surface;
  }

  &__icon {
    font-size: 14px;
  }

  &__text {
    @include ellipsis;
  }
}
</style>
