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

const fallbackLabels = [
  "برخورد مناسب پزشک",
  "تشخیص درست",
  "زمان انتظار در مطب",
  "مهارت پزشک",
  "نظافت مطب",
];

function ProgressDetail({ data, idx }) {
  const label = data?.label ?? fallbackLabels[idx];
  const progress = typeof data === "object" && data !== null ? data.progress : 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]">
        {label}
      </p>
      <LinearProgress
        value={progress || 0}
        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] font-medium ${progress ? "text-[20px]" : "text-[18px]"}`}
      >
        {progress ? `${numberToArStyle(progress)}%` : "بدون نمره"}
      </p>
    </li>
  );
}

export default ProgressDetail;