<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">
          <span
            v-if="price_unit === 'rub'"
            class="text-h4 text-grey q-pr-xs">
            ₽
          </span>
          <telegram-star
            v-if="price_unit === 'stars'"
            color="gold"
            size="24px"
            class="q-mr-xs"
          />
          
          <span class="text-h4">{{ price.toLocaleString(locale) }}</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-amber-8 text-bold text-h5">
          {{ chatsQty }}
        </span>
        <q-icon v-else name="mdi-all-inclusive" size="md" color="amber-8"/>
        <span class="q-pl-sm">
          {{ $t('price__chats')}}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import telegramStar from 'components/TelegramStar.vue'
  import { useI18n } from 'vue-i18n'
  
  const { locale } = useI18n({ useScope: 'global' })
  
  defineProps({
    name: String,
    price: Number,
    chatsQty: Number,
    price_unit: String
  })
</script>
