<script setup lang="ts">
defineProps<{
  index: number;
  label: string;
  icon: string;
}>();
</script>

<template>
  <div
    class="shadow-2 rounded-borders column items-center bg-white q-pa-md"
    style="min-height: 165px"
  >
    <div :class="`avatar-color-${index + 1}`">
      <q-avatar size="70px" :icon="icon" class="avatar-color" />
    </div>
    <div class="q-mt-md text-center text-weight-medium" style="font-size: 16px">
      {{ label }}
    </div>
  </div>
</template>

<style scoped>
.avatar-color {
  background: rgba(var(--color), 1); /* 0.5 คือค่า alpha */
}

.avatar-color-1 {
  --color: 226, 181, 138;
}

.avatar-color-2 {
  --color: 202, 206, 154;
}

.avatar-color-3 {
  --color: 204, 201, 229;
}

.avatar-color-4 {
  --color: 201, 232, 246;
}

.avatar-color-5 {
  --color: 228, 174, 205;
}

.avatar-color-6 {
  --color: 224, 167, 164;
}

.avatar-color-7 {
  --color: 234, 197, 204;
}

.avatar-color-8 {
  --color: 178, 211, 193;
}

.avatar-color-9 {
  --color: 198, 231, 235;
}

.avatar-color-10 {
  --color: 190, 157, 228;
}

.avatar-color-11 {
  --color: 218, 149, 174;
}

.avatar-color-12 {
  --color: 230, 222, 172;
}

.avatar-color-13 {
  --color: 147, 223, 178;
}

.avatar-color-14 {
  --color: 213, 160, 160;
}

.avatar-color-15 {
  --color: 148, 208, 160;
}

.avatar-color-16 {
  --color: 126, 211, 208;
}

.avatar-color-17 {
  --color: 159, 204, 214;
}
</style>
