import React from "react";
import "./Average_Rating.css";
import Rating from "react-rating";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
import { faStar as fasStar } from "@fortawesome/free-solid-svg-icons";
import { ProgressBar } from "react-bootstrap";

function Average_Rating({ avg_rating, product }) {
  const ratings = [
    { stars: 5, percentage: 90 },
    { stars: 4, percentage: 60 },
    { stars: 3, percentage: 40 },
    { stars: 2, percentage: 30 },
    { stars: 1, percentage: 0 },
  ];

  return (
    <section className="Average_Rating">
      <div className="heading_holder">
        <h4>Average Rating</h4>
        <Rating
          initialRating={Number(avg_rating?.average_rating)}
          readonly
          emptySymbol={<FontAwesomeIcon icon={farStar} color="#ef9920" />}
          fullSymbol={<FontAwesomeIcon icon={fasStar} color="#ef9920" />}
          fractions={2}
        />
      </div>

      <div className="rating_breakdown mt-3">
        {avg_rating?.rating_counts?.map((rating, index) => (
          <div
            className="rating_row d-flex align-items-center mb-2"
            key={index}
          >
            <span className="me-2 fw-bold">{rating.name}</span>
            <ProgressBar
              now={rating.percentage}
              style={{ flexGrow: 1, height: "8px" }}
              variant="success"
            />
            <span className="ms-2">{rating.percentage}%</span>
          </div>
        ))}
      </div>
    </section>
  );
}

export default Average_Rating;
