import PropTypes from 'prop-types';

import React, { PureComponent } from 'react';

​

​

​

class RatingStars extends PureComponent {

​

  render() {

    const {

      ratingPercentage,

      starsCount,

    } = this.props;

​

    const highlightedValueStyles = {

      width: ratingPercentage + '%',

    };

​

    return (

      <div className="rating-stars">

        <div

          className="rating-stars__stars rating-stars__stars--top"

          style={highlightedValueStyles}

        >

          {Array.from(Array(starsCount)).map((x, i) => (

            <span

              className="rating-stars__star"

              key={i + '-star-top'}

            >

              ★

            </span>

          ))}

        </div>

        <div className="rating-stars__stars rating-stars__stars--bottom">

          {Array.from(Array(starsCount)).map((x, i) => (

            <span

              className="rating-stars__star"

              key={i + '-star-bottom'}

            >

              ☆

            </span>

          ))}

        </div>

      </div>

    );

  }

​

}

​

RatingStars.defaultProps = {

  starsCount: 5,

};

​

RatingStars.propTypes = {

  /** Rating percentage will be highlighted by rating stars */

  ratingPercentage: PropTypes.number.isRequired,

  /** Possibility to change default count of visible stars */

  starsCount: PropTypes.number,

};

​

​

​

export default RatingStars;

​