<template>
  <span class="star-rating">
    <span v-for="i in 5" :key="i" class="star" :style="{ color: i <= rating ? 'var(--accent)' : 'var(--text3)' }">
      {{ i <= rating ? '★' : '☆' }}
    </span>
  </span>
</template>

<script setup lang="ts">
defineProps<{ rating: number }>();
</script>

<style scoped>
.star-rating { display: flex; gap: 2px; }
.star { font-size: 11px; }
</style>
