text: import * as React from "react";
  import Rating from "@mui/material/Rating";
  import Box from "@mui/material/Box";
  import StarIcon from "@mui/icons-material/Star";
  
  const labels = {
    1: "Useless+",
    2: "Poor+",
    3: "Ok+",
    4: "Good+",
    5: "Excellent+",
  };
  
  function Ratings(props) {
    const [value, setValue] = React.useState(2);
    const [hover, setHover] = React.useState(-1);
    const { handleRate, tasks, score, status } = props;
    return (
      <Box
        sx={{
          width: 200,
          display: "flex",
          alignItems: "center",
        }}
      >
        {tasks?.length !== 0 && tasks?.length === score?.length && status !== "complete" ? (
          <Rating
            name="hover-feedback"
            value={value}
            precision={1}
            onChange={(event, newValue) => {
              setValue(newValue);
            }}
            onClick={handleRate}
            onChangeActive={(event, newHover) => {
              setHover(newHover);
            }}
            emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
          />
        ) : (
          <Rating
            name="hover-feedback"
            value={value}
            precision={1}
            onChange={(event, newValue) => {
              setValue(newValue);
            }}
            onClick={handleRate}
            onChangeActive={(event, newHover) => {
              setHover(newHover);
            }}
            disabled
            emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
          />
        )}
      </Box>
    );
  }
  
  // {value !== null && (
  //   <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
  // )}
  export default Ratings;
  