import PropTypes from 'prop-types';
import React, { Component } from 'react';

import ReviewOverview from '../../atoms/reviews/ReviewOverview';
import RatingStars from '../../atoms/scores/RatingStars';



class ReviewOverviewWithRatingStars extends Component {

	render() {
		const {
			ratingMaxScore,
			ratingScore,
		} = this.props;

		let percentage = Math.round(100 * (ratingScore / ratingMaxScore));
		let nextPercentageStep = percentage;

 		if (percentage % 10 !== 0) {
			nextPercentageStep += (10 - (percentage % 10));
		}

		return (
			<ReviewOverview
				ratingMaxScore={ratingMaxScore}
				ratingScore={ratingScore}
				ratingStars={(
					<RatingStars ratingPercentage={nextPercentageStep} />
				)}
			/>
		);
	}

}

ReviewOverviewWithRatingStars.propTypes = {
	/** Maximum rating score wich is possible to get on selected rating service */
	ratingMaxScore: PropTypes.number.isRequired,
	/** Current rating score */
	ratingScore: PropTypes.number.isRequired,
};



export default ReviewOverviewWithRatingStars;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.