import React from "react";
import { clamp, range } from "lodash";
import Icon from "./icon";

interface RatingProps {
  rating: number;
}

const Rating: React.FC<RatingProps> = ({ rating }) => {
  const clampedRating = clamp(rating, 0, 5);
  return (
    <div className="rating">
      {range(0, Math.floor(clampedRating)).map((i) => (
        <Icon name="ui-star" key={`rating-star-${i}`} width={25} height={25} />
      ))}
      {rating % 1 > 0 && <Icon name="ui-halfstar" width={25} height={25} />}
    </div>
  );
};

export default Rating;