import IndividualRating from "./IndividualRating";

const Comments = (props: {
  reviewerName: string;
  reviewText: string;
  rating: number;
  reviewerImage: string;
}) => {
  return (
    <div className="widget-content sidebar-widget px-2 py-3 my-3 mx-2">
      <div className="d-flex align-items-center justify-content-between">
        <div className="d-flex gap-2 align-items-center">
          <img
            src={props.reviewerImage || "/images/human_capital_logo.png"}
            alt="Reviewer Image"
            height={50}
            width={50}
            onError={(e) => {
              e.currentTarget.src = "/images/human_capital_logo.png";
              e.currentTarget.onerror = null;
            }}
          />
          <h6 className="">{props.reviewerName}</h6>
        </div>
        <IndividualRating rating={props.rating!} />
      </div>
      <p className="small px-1 pt-2">{props.reviewText}</p>
    </div>
  );
};

export default Comments;