import { Box, colors } from "@mui/material";
import { makeStyles } from "@mui/styles";

interface Props {
  colour: string;
  completed: number;
}

const useStyles = makeStyles(() => ({
    container: {
      height: 20,
      width: "100%",
      backgroundColor: "#e0e0de",
      borderRadius: 50
    },
    filler: {
      height: "100%",
      // width: `${completed}%`,
      // backgroundColor: bgcolor,
      borderRadius: "inherit",
      textAlign: "right"
    },
    label: {
      padding: 5,
      color: colors.grey[900],
      fontWeight: "bold"
    }
  })
);

export default function CustomProgressBar(props: Props) {
  const { colour, completed } = props;
  const classes = useStyles();
  return (
    <Box className={classes.container}>
      <Box className={classes.filler} style={{ width: completed + "%", backgroundColor: colour }}>
        <span className={classes.label}>{completed}%</span>
      </Box>
    </Box>
  );
}
