<script>import { BEM } from "../../models/BEM";
export let rate;
export let totalRate;
const bm = new BEM('UI-Rate');
bm.append($$props.class);
</script>

<div class="{bm.toString()}" style={$$props.style}>
	{#each [...new Array(5)] as _, index}
		<i class="fa fa-star" class:active={index + 1 <= rate}></i>
	{/each}
	{#if totalRate}
		<span>({totalRate})</span>
	{/if}
</div>

<style>.UI-Rate {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.UI-Rate i, .UI-Rate {
  color: var(--ui-black);
}
.UI-Rate .active {
  color: gold;
}

span {
  margin-left: 10px;
  color: var(--ui-black);
}</style>
