<template>
  <div class="l-flex l-flex-row l-justify-start">
    <FilledStar v-for="(n, index) in rating" class="star-color l-mr-1" :key="index"/>
    <EmptyStar v-for="(n, index) in emptyStars" class="l-mr-1" :key="index"/>
  </div>
</template>

<script setup>
import { computed, reactive } from 'vue'
import EmptyStar from '../assets/empty_star.svg'
import FilledStar from '../assets/filled_star.svg'

const props = defineProps({
  rating: Number,
  color: String,
})

const emptyStars = computed(()  => 5 - props.rating )
</script>

<style scoped>
.star-color {
  color: v-bind(color);
}
</style>