<template>
  <div
    class="qty-card glossy text-white flex column items-center"
    :style="{ backgroundColor: bgColor }"
    >
    <div class="qty-card-title q-pa-none text-caption col-grow">
      {{$t(title)}}
    </div> 
    <div class="qty-card-text text-bold q-pa-none">
      {{ qty }}
    </div>  
  </div>
</template>

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

  const props = defineProps<{
    qty: number
    title?: string
    bgColor?: string
  }>()

  const qty= ref(props.qty)
  const title = ref(props.title ? props.title : '')
  const bgColor = ref(props.bgColor ? props.bgColor : 'primary')

</script>

<style scoped>
  .qty-card {
    min-width: 75px;
    max-width: 20%;
    min-height: 40px;
    border-radius: 16%;
    font-size: 40px;
    opacity: 0.8
  }

  .qty-card-text {
    font-size: 40px;
    display: grid;
    align-items: end;
    margin-bottom: -17px;
    margin-top: -17px;
  }
</style>
