import React from 'react';

const ReviewStars = ({ averageRating = 0 }) => {
  const hasRemainder = !Number.isInteger(averageRating || 0);
  const total = averageRating + (hasRemainder ? 1 : 0);

  return (
    <span>
      {/* full stars */}
      {[...Array(parseInt(averageRating.toString(), 10))].map(
        (_: any, i: number) => (
          <span key={`star-${i}`}>
            <i className="fa fa-star text-amber-500" />
          </span>
        )
      )}
      {/* half stars */}
      {hasRemainder && <i className="fa fa-star-half-alt text-amber-500" />}

      {/* empty stars */}
      {[...Array(5 - parseInt(total.toString(), 10))].map(
        (_: any, i: number) => (
          <span key={`star-${i}`}>
            <i className="fa-regular fa-star text-amber-500" />
          </span>
        )
      )}
    </span>
  );
};

export default ReviewStars;