<template>
  <pn-page-card>
    <template #title>
      <div class="flex items-center justify-between col-grow">
        <div>
          {{$t('subscribe__title')}}
        </div>
      </div>
    </template>

    <pn-scroll-list class="q-px-md">
      <div id="subscribe-current-balance" class="flex w100 justify-between items-center no-wrap text-h6">
        <span>
          {{ $t('subscribe__current_balance') }}
        </span>

        <div class="flex items-center">
          <q-icon name = "mdi-crown-circle-outline" color="orange" size="sm"/>
          <div class="text-bold q-pa-xs ">
            50
          </div>
        </div>
      </div>
      <div id="subscribe-need-tocken" :style = "{ borderLeft: 'solid 5px var(--q-info)' }" class="q-pl-sm">
       <q-icon name = "mdi-crown-circle-outline" color="orange" size="xs"/>{{ $t('subscribe__token_formula') }}
       <div class="text-caption">{{ $t('subscribe__token_formula_description') }}</div>
      </div>
      
      <div id="qty_chats" class="flex column q-pt-lg w100">
          <div class="text-h6 flex items-center">
            <span>{{ $t('account__chats') }}</span>
          </div>
          <div class="flex row justify-between">
            <qty-chat-card
              v-for = "chat in chats"
              :key = chat.title
              :qty = chat.qty
              :bgColor = chat.color
              :title = chat.title
            />
          </div>
        </div>

    </pn-scroll-list>
  </pn-page-card>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  // import { useRouter } from 'vue-router'
  // import { useAuthStore } from 'stores/auth'
  // import type { WebApp } from '@twa-dev/types'
  import qtyChatCard from 'components/account-page/qtyChatCard.vue'
  // import optionPayment from 'components/admin/account-page/optionPayment.vue'

  // const router = useRouter()
  // const authStore = useAuthStore()

  // const tg = inject('tg') as WebApp
  // const tgUser = tg.initDataUnsafe.user

  const chats = ref([
    { title: 'account__chats_active', qty: 8, color: 'var(--q-primary)' },
    { title: 'account__chats_unbound', qty: 2, color: 'grey' },
    { title: 'account__chats_free', qty: 5, color: 'green' },
    { title: 'account__chats_total', qty: 15, color: 'var(--q-info)' },
  ])

  /* const payment=ref([
    { id: 1, qty: 50, stars: 200, discount: 0 },
    { id: 2, qty: 120, stars: 400, discount: 20 },
    { id: 3, qty: 220, stars: 500, discount: 30 }
  ]) */

</script>

<style lang="scss">
</style>
