<template>
  <slide-template
    title="price__title"
    subtitle="price__subtitle"
    >
    <custom-tabs
      v-bind="$attrs"
      :tabItems
      :useTabsNoCaps
      >
      <template #default="{ item }">
        <div
          class="fit row q-pb-lg"
          >
          <div class="col-md-3 col-sm-6 col-xs-12 q-pa-lg"
            v-for="(tariff, idx) in tariffs"
            :key="idx"
            >
            <price-section-item
              :name="tariff.name"
              :chats-qty="tariff.chatsQty ?? 0"
              :price="item.name === 'legal' ? tariff.price_rub : tariff.price"
              :price_unit="item.name === 'legal' ? 'rub' : 'stars'"
            />
          </div>
        </div>
        <q-card 
          flat
          class="bg-white rounded-card"
          >
          <q-item v-if="item.name === 'legal'">
            <q-item-section avatar>
              <span class="text-h4 text-grey q-px-sm">
                ₽
              </span>
            </q-item-section>
            <q-item-section>
              <q-item-label class="text-grey">
                {{ $t('price__rub_pay') }}
              </q-item-label>
              <q-item-label class="text-h6">
                {{ $t('price__rub_resident') }}
              </q-item-label>
              <q-item-label class="text-grey">
                {{ $t('price__rub_closing_documents') }}
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-item v-if="item.name === 'individual'">
            <q-item-section avatar>
              <telegram-star color="gold" size="48px"/>
            </q-item-section>
            <q-item-section>
              <q-item-label class="text-grey">
                {{ $t('price__stars_pay') }}
              </q-item-label>
              <q-item-label class="text-h6">
                Telegram Stars
              </q-item-label>
              <q-item-label class="text-grey">
                {{ $t('price__stars_description') }}
              </q-item-label>
            </q-item-section>
          </q-item>
        </q-card>
      </template>
    </custom-tabs>
  </slide-template>
</template>

<script setup>
  import SlideTemplate from 'components/SlideTemplate.vue'
  import CustomTabs from 'components/CustomTabs.vue'
  import PriceSectionItem from 'components/PriceSectionItem.vue'
  import TelegramStar from 'components/TelegramStar.vue'

  defineProps({
    useTabsNoCaps: Boolean
  })

  const tabItems = [
    { name: 'legal', label: 'price__legal'},
    { name: 'individual', label: 'price__individual'}
  ]

  const tariffs = [
    { id: 1, name: 'TEST', price: 0, price_rub: 0, chatsQty: 5 },
    { id: 2, name: 'START', price: 1000, price_rub: 2000, chatsQty: 15 },
    { id: 3, name: 'PRO', price: 5000, price_rub: 10000, chatsQty: 40 },
    { id: 4, name: 'VIP', price: 12000, price_rub: null, chatsQty: null }
  ]

</script>

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