App.StarRating = function StarRating({ rating, onRate, readonly }) {
    const [hover, setHover] = React.useState(0);

    return (
        <div className={'star-rating' + (readonly ? ' readonly' : '')}>
            {[1, 2, 3, 4, 5].map(star => (
                <span
                    key={star}
                    className={'star' + ((hover || rating) >= star ? ' filled' : '')}
                    onClick={() => !readonly && onRate && onRate(star)}
                    onMouseEnter={() => !readonly && setHover(star)}
                    onMouseLeave={() => !readonly && setHover(0)}
                >
                    &#9733;
                </span>
            ))}
        </div>
    );
};