<template>
  <div class="flex column items-center bg-white rounded-card q-pa-md">
    <div class="text-h5 text-primary text-bold">
      {{ name }}
    </div>

    <div class="flex items-center" style="min-height: 50px;">
      <div v-if="price" class="flex column items-center">
        <div class="flex no-wrap items-center">
          <telegram-star color="gold" size="24px" class="q-mr-xs"/>
          <span class="text-h4">{{ price }}</span>
        </div>
        <span class="text-caption">{{ $t('price__per_month') }}</span>
      </div>
      <div v-else class="text-bold text-h5">
        {{ $t('price__free_tax') }}
      </div>
    </div>
      
    <div class="flex items-center q-pt-md" style="min-height: 50px;">
      <div class="flex no-wrap items-center">
        <span v-if="chatsQty" class="text-brand2 text-bold text-h5">
          {{ chatsQty }}
        </span>
        <q-icon v-else name="mdi-all-inclusive" size="md" color="brand2"/>
        <span class="q-pl-sm">
          {{ $t('price__chats')}}
        </span>
      </div>
    </div>
  </div>
</template>

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

  defineProps({
    name: String,
    price: Number,
    chatsQty: Number
  })
</script>
