<template>
  <div class="space-x-1">
    <UIcon
      v-for="i in rating"
      :key="i"
      name="i-heroicons-star-20-solid"
      class="text-yellow-500"
    />
    <UIcon v-for="i in 5 - rating" :key="i" name="i-heroicons-star" />
  </div>
</template>

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

<StarRating :rating="4" />