<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    branch: {
      icon: string;
      count: number;
      label: string;
      color: 'pink' | 'purple' | 'green' | 'orange';
    }[];
    dark?: boolean;
    labelI18n?: boolean;
  }>(),
  {
    labelI18n: false,
  },
);
</script>

<template>
  <div class="row no-wrap" style="gap: var(--size-4)" :class="{ dark }">
    <div
      v-for="v in props.branch"
      class="no-padding shadow-2 stat-card"
      :class="{ [`stat-card__${v.color}`]: true }"
      :key="v.label"
    >
      <div class="stat-card__content row items-center q-pa-sm">
        <div class="col-4 text-center">
          <q-avatar
            size="lg"
            style="background-color: hsla(0 0% 100% /0.2)"
            text-color="white"
            :icon="v.icon"
          />
        </div>
        <div class="col-6 justify-center column">
          <div class="col-6 ellipsis text-bold" style="width: 100%">
            {{ labelI18n ? $t(v.label) : v.label }}
            <q-tooltip
              anchor="top middle"
              self="bottom middle"
              :offset="[10, 10]"
            >
              {{ labelI18n ? $t(v.label) : v.label }}
            </q-tooltip>
          </div>

          <div class="col-6">{{ v.count }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.stat-card {
  border-radius: var(--radius-2);
  overflow: hidden;
}

.stat-card__content {
  z-index: 2;
  color: hsla(var(--gray-0-hsl) / 1);
  background: hsla(var(--_color) / 1);
  height: 100%;
  min-width: 200px;
}

.stat-card__purple {
  --_color: var(--violet-11-hsl);
}

.stat-card__pink {
  --_color: var(--pink-6-hsl);
}

.stat-card__green {
  --_color: var(--teal-10-hsl);
}

.stat-card__orange {
  --_color: var(--orange-5-hsl);
}

.dark .stat-card__purple {
  --_color: var(--violet-10-hsl);
}

.dark .stat-card__green {
  --_color: var(--teal-8-hsl);
}

.dark .stat-card__orange {
  --_color: var(--orange-8);
}
</style>
