<template>
  <div class="flex row items-center q-pa-none q-ma-none">
    <div class="q-ma-xs text-bold">{{ qty }}</div>
    <div>
      <q-icon name = "mdi-message-outline"/>
      <q-icon name = "mdi-close"/>
      <span>{{ $t('month') }}</span>
    </div>
    <div class="q-pa-xs">/</div>
      <q-icon name = "mdi-star" class="text-orange" size="sm"/>
    <div>{{ stars }}</div>
    <q-badge
      v-if="discount !== 0"
      color="red"
      class="q-ml-sm"
      >
      <span>
        {{ '-' + String(discount) + '%' }}
      </span>
    </q-badge>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const props = defineProps<{
    qty: number
    stars: number
    discount: number
  }>()

  const qty= ref(props.qty)
  const stars = ref(props.stars)
  const discount = ref(props.discount)

</script>

<style scoped>
</style>
