<script setup>
import { computed, onMounted, ref, watch } from "vue";
import { Icon } from '@iconify/vue';

const props = defineProps(["df"]);

// Generate stars based on options (default 5)
const starCount = computed(() => {
  return parseInt(props.df.options) || 5;
});
</script>

<template>
  <div class="control editable">
    <div class="field-controls">
      <slot name="label" />
      <slot name="actions" />
    </div>
    <div class="rating">
      <Icon 
        v-for="i in starCount" 
        :key="i" 
        icon="mdi:star" 
        class="star"
      />
    </div>
    <div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
  </div>
</template>

<style lang="scss" scoped>
.rating {
  display: flex;
  gap: 4px;
  
  .star {
    width: 20px;
    height: 20px;
    color: #fbbf24;
  }
}

.description {
  font-size: 12px;
  color: #6b7280;
}

.mt-2 {
  margin-top: 0.5rem;
}
</style>
