import { numberToArStyle } from "@/helper"
import { CircularProgress } from "@mui/material"

function ProgressAll({ doctor }) {
    return (
        <div className="w-full h-fit relative">
            <CircularProgress
                variant="determinate"
                value={doctor.total_user_satisfaction}
                sx={{
                    '& .MuiCircularProgress-circle': {
                        stroke: '#05BA58',
                        strokeLinecap: 'round'
                    },
                    '& .MuiCircularProgress-svg': {
                        borderRadius: '50%',
                        boxShadow: 'inset 0 0 0 11px #D7D7D7'
                    }
                }}
                className="!w-full !h-full"
            />
            <div
                className="flex flex-col justify-center items-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 gap-1"
            >
                <p className="text-[#525252] text-[12px] font-normal text-center">مجموع<br />رضایت کاربران</p>
                <p>{numberToArStyle(doctor.total_user_satisfaction)}%</p>
            </div>
        </div>
    )
}

export default ProgressAll