import CircularLoading from "@/app/component/loading/Circular";
import { numberToArStyle } from "@/helper";
import { CircularProgress } from "@mui/material";

function ProgressAll({ satisfaction }) {
  return (
    <div className="hidden lg:flex w-full h-fit relative min-w-[145px] max-w-[150px]">
      <CircularLoading width={120} height={120}>
        <CircularProgress
          variant="determinate"
          value={satisfaction || 0}
          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 className="text-[#3B3B3B]">
            {numberToArStyle(satisfaction || 0)}%
          </p>
        </div>
      </CircularLoading>
    </div>
  );
}

export default ProgressAll;
