import React from "react";

const IndividualRating = ({
  rating
}: {
  rating: number;
}) => {

  return (
    <div className="d-flex align-items-center justify-content-center flex-column">
      {/* <div className="me-2">{rating || 0}</div> */}
      <div className="d-flex align-items-center">
        {[...Array(rating)].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>
        ))}
        
        {[...Array(5 - rating )].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>
  );
};

export default IndividualRating;