<template>
  <div
    :class="[
      'star-rating',
      { 'star-rating--readonly': readonly },
      { 'star-rating--large': size === 'large' },
      { 'star-rating--small': size === 'small' }
    ]"
  >
    <div class="star-rating__stars">
      <button
        v-for="star in 5"
        :key="star"
        type="button"
        :class="[
          'star-rating__star',
          { 'star-rating__star--filled': star <= displayValue },
          { 'star-rating__star--half': star === Math.ceil(displayValue) && displayValue % 1 !== 0 },
          { 'star-rating__star--hovered': !readonly && star <= hoverValue }
        ]"
        :disabled="readonly"
        @click="setValue(star)"
        @mouseenter="setHover(star)"
        @mouseleave="clearHover"
      >
        <q-icon
          :name="getStarIcon(star)"
          :color="getStarColor(star)"
          :size="starSize"
        />
      </button>
    </div>

    <!-- Label valore -->
    <span v-if="showLabel" class="star-rating__label">
      {{ displayLabel }}
    </span>

    <!-- Valore numerico -->
    <span v-if="showValue" class="star-rating__value">
      {{ displayValue.toFixed(1) }}
    </span>
  </div>
</template>

<script lang="ts" src="./StarRating.ts" />
<style lang="scss" src="./StarRating.scss" />
