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 min-w-[120px] 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;