<template>
  <div>
    <div
      v-if="!getShopeeShopRef"
      class="pl-seller-connect"
    >
      <Card class="pl-seller-connect__card">
        <div class="pl-seller-connect__content">
          <div class="pl-seller-connect__icon">
            <Icon
              type="ios-link-outline"
              size="48"
            />
          </div>

          <div class="pl-seller-connect__text">
            <h3 class="pl-seller-connect__title">
              {{ $t('SHOP_NOT_CONNECTED', { shop: getShopeeShopName }) }}
            </h3>
            <p
              v-if="text"
              class="pl-seller-connect__desc"
            >
              {{ text }}
            </p>
            <p
              v-else
              class="pl-seller-connect__desc"
            >
              {{ $t('SHOP_CONNECT_DESCRIPTION') }}
            </p>
          </div>

          <router-link
            to="/shopee/seller/shop/info"
            target="_blank"
          >
            <Button
              type="primary"
              size="large"
              class="pl-seller-connect__btn"
            >
              <Icon type="ios-sync-outline" />
              <span>{{ $t('SHOP_CONNECT_BTN') }}</span>
            </Button>
          </router-link>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShopeeSellerConnected',
  props: {
    text: String,
  },
};
</script>

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

.pl-seller-connect {
  padding: 20px 0;

  &__card.ivu-card {
    border: 1px solid $c-border;
    border-radius: $radius-card;
    overflow: hidden;
    box-shadow: none;
  }

  &__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    padding: 40px 20px;
  }

  &__icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $c-link-tint;
    border-radius: 50%;
    border: 1px solid $c-link-tint;
    color: $c-link;
  }

  &__text {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  &__title {
    font-size: 18px;
    font-weight: 600;
    color: $c-text-strong;
    margin: 0;
  }

  &__desc {
    font-size: 14px;
    color: $c-text;
    margin: 0;
    line-height: 1.6;
  }

  &__btn.ivu-btn {
    min-width: 200px;
    font-weight: 500;
    border-radius: $radius-item;

    i {
      margin-right: 8px;
    }
  }
}
</style>
