<div class="star-rating" [class.readonly]="readonly" [class.size-small]="size === 'small'" [class.size-medium]="size === 'medium'" [class.size-large]="size === 'large'">
  <div class="stars-container">
    @for (star of stars; track star) {
      <span 
        class="star"
        [class.filled]="star.filled"
        [class.hovered]="star.hovered"
        (click)="setRating(star.index)"
        (mouseenter)="setHoverRating(star.index)"
        (mouseleave)="clearHover()"
        [title]="star.index + '星'"
      >
        ★
      </span>
    }
  </div>
  
  @if (showText && rating > 0) {
    <div class="rating-text">
      {{ rating }}星{{ getRatingText() ? ' - ' + getRatingText() : '' }}
    </div>
  } @else if (showText && rating === 0 && !readonly) {
    <div class="rating-text">
      请评分
    </div>
  }
</div>