<script setup lang="ts">
import AppBox from 'components/app/AppBox.vue';

const selector = defineModel('selector');

defineProps<{
  list: {
    label: string;
    count: number;
  }[];
}>();
</script>
<template>
  <AppBox bordered>
    <q-list>
      <q-item
        v-for="v in list"
        :key="v.label"
        clickable
        :active="selector === v.label"
        :active-class="
          selector === v.label
            ? $q.dark.isActive
              ? 'active dark'
              : 'active'
            : ''
        "
        @click="selector = v.label"
      >
        <q-item-section>{{ $t(v.label) }}</q-item-section>
        <div class="dot text-weight-bold">{{ v.count }}</div>
      </q-item>
    </q-list>
  </AppBox>
</template>

<style scoped>
.active {
  color: hsl(var(--info-fg)) !important;
  background-color: hsl(var(--info-bg));
  border-radius: var(--radius-3);

  .dot {
    color: var(--blue-6);
    background-color: white;
  }

  &.dark {
    background-color: transparent;
    border: 1px solid hsl(var(--info-bg));
  }
}

.q-item {
  align-items: center;
  border-radius: var(--radius-3);
  color: hsl(var(--stone-4-hsl));
  border: 1px solid transparent;
}

.dot {
  height: 25px;
  width: 25px;
  background-color: hsl(var(--stone-4-hsl));
  color: white;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
</style>
