import React from "react";

const Rating = ({ review }: { review: Rating }) => {
  const fullStars = Math.floor(!Number.isNaN(Number(review?.avgRating)) ? review?.avgRating : 0);
  const hasHalfStar = review?.avgRating - fullStars >= 0.5;
  return (
    <div className="d-flex align-items-center justify-content-center flex-column">
      <div className="me-2">
        {!Number.isNaN(Number(review?.avgRating)) ? review?.avgRating : 0}
      </div>
      <div className="d-flex align-items-center justify-content-center">
        {fullStars > 0 &&
          [...Array(fullStars)]?.map((_, index) => (
            <svg
              key={index}
              className="text-warning me-1"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="currentColor"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" />
            </svg>
          ))}
        {hasHalfStar && (
          <svg
            className="text-warning me-1"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="currentColor"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" />
          </svg>
        )}
        {[...Array(5 - fullStars - (hasHalfStar ? 1 : 0))]?.map((_, index) => (
          <svg
            key={index}
            className="text-secondary me-1"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="currentColor"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" />
          </svg>
        ))}
      </div>
      <div className="ms-2">({review?.data?.length || 0} reviews)</div>
    </div>
  );
};

export default Rating;