<template>
  <div class="review-summary-star-rating-wrapper">
    <div class="review-summary-star-rating" v-bind:rating="rating">
      <div
        class="review-summary-star-rating-fill-review"
        v-bind:style="{
          width: ratingToPercent + '%',
          'font-size': '20px',
        }"
      >
        <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
      </div>
      <div
        class="review-summary-star-rating-base-review"
        v-bind:style="{
          'font-size': '20px',
        }"
      >
        <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
      </div>
    </div>
    <div class="review-summary-star-rating-text-wrapper">
      <div class="review-summary-star-rating-text">
        {{ Number(rating).toFixed(1) }}
      </div>
      <div class="review-summary-star-rating-base-text">/ 5</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "starRatingForReview",
  props: {
    rating: String,
  },
  computed: {
    ratingToPercent() {
      const score = +this.rating * 20; // 100%를 기준으로 하기 위해
      return score;
    },
  },
};
</script>

<style></style>
