<template>
  <span v-for="n in computedStars.full" class="c-star c-star--full">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24">
      <g fill="none" fill-rule="evenodd">
        <path fill="#e9ebf5" d="M12 18.27l4.151 2.505a1 1 0 0 0 1.49-1.083L16.54 14.97l3.669-3.178a1 1 0 0 0-.57-1.752l-4.829-.41-1.89-4.458a1 1 0 0 0-1.84 0L9.19 9.63l-4.828.41a1 1 0 0 0-.57 1.752L7.46 14.97l-1.102 4.722a1 1 0 0 0 1.491 1.083L12 18.27z"/>
        <path class="full-star" fill="currentColor" d="M12 18.27l4.151 2.505a1 1 0 0 0 1.49-1.083L16.54 14.97l3.669-3.178a1 1 0 0 0-.57-1.752l-4.829-.41-1.89-4.458a1 1 0 0 0-1.84 0L9.19 9.63l-4.828.41a1 1 0 0 0-.57 1.752L7.46 14.97l-1.102 4.722a1 1 0 0 0 1.491 1.083L12 18.27z"/>
        <path class="half-star" fill="none" d="M12 18.27l4.151 2.505a1 1 0 0 0 1.49-1.083L16.54 14.97 9.19 9.63l-4.828.41a1 1 0 0 0-.57 1.752L7.46 14.97l-1.102 4.722a1 1 0 0 0 1.491 1.083L12 18.27z"/>
      </g>
    </svg>
  </span>
  <span v-for="n in computedStars.half" class="c-star c-star--half">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24">
      <g fill="none" fill-rule="evenodd">
        <path fill="#e9ebf5" d="M12 18.27l4.151 2.505a1 1 0 0 0 1.49-1.083L16.54 14.97l3.669-3.178a1 1 0 0 0-.57-1.752l-4.829-.41-1.89-4.458a1 1 0 0 0-1.84 0L9.19 9.63l-4.828.41a1 1 0 0 0-.57 1.752L7.46 14.97l-1.102 4.722a1 1 0 0 0 1.491 1.083L12 18.27z"/>
        <path class="full-star" fill="currentColor" d="M12 18.27l4.151 2.505a1 1 0 0 0 1.49-1.083L16.54 14.97l3.669-3.178a1 1 0 0 0-.57-1.752l-4.829-.41-1.89-4.458a1 1 0 0 0-1.84 0L9.19 9.63l-4.828.41a1 1 0 0 0-.57 1.752L7.46 14.97l-1.102 4.722a1 1 0 0 0 1.491 1.083L12 18.27z"/>
        <path class="half-star" fill="none" d="M12 18.27l4.151 2.505a1 1 0 0 0 1.49-1.083L16.54 14.97 9.19 9.63l-4.828.41a1 1 0 0 0-.57 1.752L7.46 14.97l-1.102 4.722a1 1 0 0 0 1.491 1.083L12 18.27z"/>
      </g>
    </svg>
  </span>
  <span v-for="n in computedStars.empty" class="c-star">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24">
      <g fill="none" fill-rule="evenodd">
        <path fill="#e9ebf5" d="M12 18.27l4.151 2.505a1 1 0 0 0 1.49-1.083L16.54 14.97l3.669-3.178a1 1 0 0 0-.57-1.752l-4.829-.41-1.89-4.458a1 1 0 0 0-1.84 0L9.19 9.63l-4.828.41a1 1 0 0 0-.57 1.752L7.46 14.97l-1.102 4.722a1 1 0 0 0 1.491 1.083L12 18.27z"/>
        <path class="full-star" fill="currentColor" d="M12 18.27l4.151 2.505a1 1 0 0 0 1.49-1.083L16.54 14.97l3.669-3.178a1 1 0 0 0-.57-1.752l-4.829-.41-1.89-4.458a1 1 0 0 0-1.84 0L9.19 9.63l-4.828.41a1 1 0 0 0-.57 1.752L7.46 14.97l-1.102 4.722a1 1 0 0 0 1.491 1.083L12 18.27z"/>
        <path class="half-star" fill="none" d="M12 18.27l4.151 2.505a1 1 0 0 0 1.49-1.083L16.54 14.97 9.19 9.63l-4.828.41a1 1 0 0 0-.57 1.752L7.46 14.97l-1.102 4.722a1 1 0 0 0 1.491 1.083L12 18.27z"/>
      </g>
    </svg>
  </span>
</template>

<script setup>
import { defineProps, computed } from "vue";

const props = defineProps({
  rating: {type: Number, required: true}
});

const computedStars = computed(() => {
  const total = 5
  const full = Math.floor(props.rating);
  let remaining = props.rating - full;
  const half = Math.floor(remaining * 2);
  const empty = total - full - half
  return {
    full,
    half,
    empty
  };
});
</script>