<template>
  <div>
    <div
      v-if="!getShopeeShopRef"
      class="shop-connect-wrapper"
    >
      <Card class="shop-connect-card">
        <div class="shop-connect-content">
          <div class="icon-wrapper">
            <Icon
              type="ios-link-outline"
              size="48"
              color="#2d8cf0"
            />
          </div>

          <div class="text-content">
            <h3 class="title">
              {{ $t('SHOP_NOT_CONNECTED', { shop: getShopeeShopName }) }}
            </h3>
            <p
              v-if="text"
              class="description"
            >
              {{ text }}
            </p>
            <p
              v-else
              class="description"
            >
              {{ $t('SHOP_CONNECT_DESCRIPTION') }}
            </p>
          </div>

          <router-link
            to="/shopee/seller/shop/info"
            target="_blank"
          >
            <Button
              type="primary"
              size="large"
              class="connect-button"
            >
              <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>
.shop-connect-wrapper {
  padding: 20px 0;
}

.shop-connect-card {
  border: 2px solid #e8f4ff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none !important;
}

.shop-connect-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
}

.icon-wrapper {
  margin-bottom: 24px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e8f4ff;
  border-radius: 50%;
  border: 2px solid #d0e5ff;
}

.text-content {
  margin-bottom: 32px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.description {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.6;
}

.connect-button {
  min-width: 200px;
  font-weight: 500;
  border-radius: 8px;

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