<template>
    <i v-for="index in 5" :key="index" :class="getStarClass(index)" :style="{ color: getStarColor(index) }"></i>
</template>
  
<script>
export default {
    props: {
        rating: {
            type: Number,
            required: true,
            default: 0.0,
            validator: (value) => !isNaN(value) && isFinite(value)
        }
    },
    methods: {
        getStarClass(index) {
            if (index <= Math.floor(this.rating)) {
                return 'fa-solid fa-star fa-xl';
            } else if (index - 0.5 <= this.rating) {
                return 'fa-solid fa-star-half-stroke fa-xl';
            } else {
                return 'fa-solid fa-star fa-xl';
            }
        },
        getStarColor(index) {
            const integerRating = Math.floor(this.rating);
            const decimalPart = this.rating - integerRating;

            if (index <= integerRating || (index === integerRating + 1 && decimalPart >= 0.5)) {
                return '#F29D38';
            } else {
                return '#CCC';
            }
        }
    }
};
</script>
  