<script setup lang="ts">
/** รับค่ามาจาก หน้าหลัก*/
const props = defineProps({
  color: {
    type: String,
    default: "",
  },
  label: {
    type: String,
    default: "",
  },
  amount: {
    type: Number,
    default: 0,
  },
});

/**
 * ปรับขนาด การ์ดตาม ค่าที่ได้รับมา
 * @param val ตัวเลข
 */
function sizeCard(val: number) {
  if (val === 5) {
    return "width:15%;";
  }
}
</script>
<template>
  <div
    :style="$q.screen.lt.md ? '' : sizeCard(5)"
    :class="$q.screen.lt.sm ? 'col-4' : ''"
  >
    <div
      class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-px-sm"
    >
      <div class="col-12 row items-center q-pa-sm">
        <div
          class="col-12 text-h5 text-weight-bold"
          :style="{ color: props.color }"
        >
          {{ props.amount }}
        </div>
        <div class="col-12 text-dark ellipsis">
          {{ props.label }}
        </div>
      </div>
    </div>
  </div>
</template>
