<template>
  <slide-template title="price__title">
    <q-card
      class="flex column justify-center q-my-md items-center q-gutter-y-md"
      style="max-width: 400px"
      >
      <div class="flex column items-center">
        <div class="flex text-h6">
          <telegram-star color="gold" size="24px"/>
          <span class="q-ml-sm" style="text-decoration: line-through;">2</span>&nbsp;
          <span class="text-bold text-red">0</span>&nbsp;
          <span>- {{ $t('price__chat_per_day') }}</span>
        </div>
        <div class="flex items-center">
          <q-badge color="red" class="q-mr-sm">100% OFF</q-badge>
          <span>{{  $t('price__sale_date') }}</span>
        </div>
      </div>

      <q-card 
        flat
        class="bg-grey-3"
        style="border-radius: 12px;"
        >
        <q-item>
          <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>

      <q-list class="q-my-none q-pa-md">
        <q-item
          v-for="item in priceItems"
          :key="item.id"
          dense
          >
          <q-item-section avatar>
            <q-avatar text-color="brand">
              <q-icon v-if="item.icon" :name="item.icon" size="md"/>
              <span v-else class="text-bold">{{ item.text }}</span>
            </q-avatar>
          </q-item-section>
          <q-item-section>
            {{ $t(item.label)}}
          </q-item-section>
        </q-item>
      </q-list>
    </q-card>
  </slide-template>
</template>

<script setup lang="ts">
  import telegramStar from 'components/TelegramStar.vue'
  import SlideTemplate from 'components/SlideTemplate.vue'

  const priceItems = [
    { id: 1, icon: 'mdi-all-inclusive', label: 'price_unlimited_users' },
    { id: 2, icon: 'mdi-all-inclusive', label: 'price_unlimited_projects' },
    { id: 3, text: '5', label: 'price_free_chats' },
    { id: 4, icon: 'mdi-lifebuoy', label: 'price_support' }
  ]
  
</script>

<style scoped>
</style>
