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;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.