import Component from '@glimmer/component';
import { lt } from 'ember-truth-helpers';

export default class PixStars extends Component {
  get starsCount() {
    if (!this.args.total && !this.args.count) return [];
    return this.args.total ? Array(this.args.total) : Array(this.args.count);
  }

  get itemClasses() {
    if (!this.args.color) return 'pix-stars__item';
    return `pix-stars__item pix-stars__item--color-${this.args.color}`;
  }

  <template>
    <div class="pix-stars" ...attributes>
      <span class="screen-reader-only">{{@alt}}</span>
      {{#each this.starsCount as |item index|}}
        <svg
          role="img"
          class={{this.itemClasses}}
          data-acquired={{lt index @count}}
          aria-hidden="true"
          viewBox="0 0 36 36"
        >
          <path
            d="M19.2828 2.10285L19.2859 2.1094L19.2891 2.11591L23.2657 10.1293C23.7043 11.0131 24.5494 11.6248 25.5259 11.7652L34.3061 13.0281C34.3075 13.0283 34.3089 13.0285 34.3102 13.0287C35.2023 13.1692 35.6257 14.3013 34.8986 15.0326C34.8976 15.0336 34.8966 15.0346 34.8956 15.0356L28.5817 21.2292C27.8785 21.919 27.5588 22.9099 27.7261 23.8806L29.2294 32.5994C29.3684 33.5432 28.3298 34.2646 27.5175 33.8437C27.5166 33.8432 27.5157 33.8428 27.5148 33.8423L19.7026 29.6958C18.8261 29.2305 17.7761 29.2289 16.8981 29.6914L9.01736 33.8423C9.01683 33.8426 9.01631 33.8428 9.01578 33.8431C8.20337 34.2653 7.16367 33.5437 7.30279 32.5994L8.80604 23.8806C8.97339 22.9099 8.65362 21.919 7.95048 21.2292L1.63355 15.0326C0.90651 14.3014 1.32978 13.1695 2.22156 13.0288L11.0636 11.7656C12.0477 11.6251 12.8982 11.0062 13.3347 10.1131L17.2434 2.11512C17.6777 1.2532 18.8988 1.30004 19.2828 2.10285Z"
            stroke-width="2"
          ></path>
        </svg>
      {{/each}}
    </div>
  </template>
}