<script lang="ts" setup>

// types

type Props = {
    rate: number
}

// props

defineProps<Props>();

</script>

<template>
    <div class="flex items-center gap-2">
        <span class="typo-p-sm">
            {{ rate }}
        </span>
        <div class="flex items-center gap-1">
            <Icon
                v-for="i in Math.round(5 - rate)"
                name="ci:star-solid"
                class="size-4.5 **:fill-slate-300"
            />
            <Icon
                v-for="i in Math.round(rate)"
                name="ci:star-solid"
                class="size-4.5 **:fill-yellow-500"
            />
        </div>
    </div>
</template>