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="#02542f" />}
                    fullSymbol={<FontAwesomeIcon icon={fasStar} color="#02542f" />}
                    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: '10px' }}
                            variant="success"
                        />
                        <span className="ms-2">{rating.percentage}%</span>
                    </div>
                ))}
            </div>
        </section>
    );
}

export default Average_Rating;
