<template>
  <span class="dots">
    <span v-for="i in max" :key="i" class="dot" :class="[{ filled: i <= value }, colorClass]">●</span>
  </span>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
  value: { type: Number, default: 0 },
  max: { type: Number, default: 5 },
  color: { type: String, default: 'orange' }
})
const colorClass = computed(() => props.color === 'negative' ? 'neg' : 'org')
</script>
<style scoped>
.dots { display: inline-flex; gap: 2px; }
.dot { font-size: 10px; color: var(--dot-empty); }
.dot.filled.org { color: var(--dot-filled); }
.dot.filled.neg { color: var(--negative); }
</style>
