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

function ProgressDetail({ data }) {
    return (
        <li className="flex items-center justify-start gap-2 w-full">
            <p className="text-[#525252] text-[14px] font-normal w-[118px]">{data.label}</p>
            <LinearProgress
                value={data.progress}
                variant="determinate"
                className="!w-full lg:!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
                sx={{
                    '& .MuiLinearProgress-bar': {
                        background: '#05BA58',
                        borderRadius: '10px'
                    }
                }}
            />
            <p className="text-[#525252] text-[20px] font-medium">{numberToArStyle(data.progress)}%</p>
        </li>
    )
}

export default ProgressDetail