import React from "react";

import classNames from "classnames/bind";

import css from "./StarRating.module.less";

export default function StarRating({ rating, className }) {
  const roundToHalf = (number) => {
    return Math.round(number * 2) / 2;
  };

  const cx = classNames.bind(css);
  const roundedRating = Math.min(Math.max(0, roundToHalf(rating)), 5);
  const starRating = `starRating-${roundedRating.toString().replace(".", "_")}`;

  return (
    <div
      aria-label={"star rating " + roundedRating + " out of 5"}
      className={cx("star", starRating, className)}
    />
  );
}
