<template>
  <div class="lofty-rate-stars">
      <i v-for="i in 5" @click="model = i"  :style="starStyle"
         class="lofty_iconfont lofty-icon-star-fill" :class="{active: model >= i}"></i>
  </div>
</template>

<script setup>
const { size, gap } = defineProps({
  size: {
    type: [Number, String],
    default: 20
  },
  gap: {
    type: [Number, String],
    default: 10
  }
})
const model = defineModel()
const starStyle = computed(() => {
  return {
    'fontSize': `${size}px`,
    'margin-right': `${gap}px`
  }
})
</script>

<style lang="scss">
.lofty-rate-stars {
  display: flex;
  .lofty_iconfont{
    &.lofty-icon-star-fill {
      cursor: pointer;
      color: rgba(218, 218, 218, 1);
    }
    &.active {
      color: rgba(255, 166, 0, 1);
    }
  }
}
</style>