import { Slider } from "@mui/material";
import { useState } from "react";

function ProgressChange({ data, changeData, parent }) {
  const [value, setValue] = useState(data.progress);

  return (
    <li className="flex items-center justify-start gap-3 w-full">
      <p className="text-[#525252] text-[14px] font-normal w-[118px] min-w-[120px]">
        {data.label}
      </p>
      <Slider
        defaultValue={data.progress}
        className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]"
        onChange={(e) => {
          setValue(e.target.value);
          changeData(parent, data.name, e.target.value);
        }}
        sx={{
          "& .MuiSlider-rail": {
            background: "#E8E8E8",
            opacity: "100",
          },
          "& .MuiSlider-track": {
            background: "#05BA58",
            border: "none",
          },
          "& .MuiSlider-thumb": {
            marginRight: "-21px",
            background: "#EBEBEB",
            border: "1px solid #05BA58 !important",
          },
          "& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover": {
            boxShadow: "none",
          },
        }}
      />
      <p className="text-[#525252] text-[20px] font-medium w-[30px] min-w-[32px] text-center">
        {value}
      </p>
    </li>
  );
}

export default ProgressChange;