import { Rating } from "@mui/material"
import Progress from "./ProgressDetail"
import ProgressAll from "./ProgressAll"

function Chart({ doctor }) {
    return (
        <div className='rounded-lg my-6 border border-[#EFEFEF] bg-[#FFF] pt-4 pb-6 px-6'>
            <div className='flex items-center justify-start gap-2.5'>
                <p className="text-[#616161] text-[14px] font-medium">امتیاز کلی کاربران: {doctor.overall_score} از 5</p>
                <p className="text-[#7E7E7E] text-[14px] font-normal">(از مجموع {doctor.comments.length} نظر)</p>
            </div>
            <Rating
                readOnly
                value={4}
                size="small"
                name="read-only"
                className="!mt-4 !mb-6"
            />
            <div className="flex items-center justify-center gap-[50px]">
                <ul className="flex flex-col items-start justify-start gap-1.5">
                    {doctor.progress_detail.map((item, idx) => (
                        <Progress
                            data={item}
                            key={idx}
                        />
                    ))}
                </ul>
                <ProgressAll doctor={doctor} />
            </div>
        </div>
    )
}

export default Chart