import * as React from "react";
import CircularProgress from "@mui/material/CircularProgress";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";

export default function OverviewVisual(props) {
  const { value, color, label } = props;
  return (
    <Box className="overview-visual-wrapper">
      <Box sx={{ position: "relative", display: "inline-flex" }}>
        <CircularProgress
          variant="determinate"
          value={value}
          color={color}
          size="6.25rem"
          className="overview-visual-display"
        />
        <Box
          sx={{
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            position: "absolute",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <Typography variant="h4" component="div">
            {`${Math.round(value)}%`}
          </Typography>
        </Box>
      </Box>
      <Typography
        variant="h5"
        component="div"
        className="overview-visual-label"
      >
        {label}
      </Typography>
    </Box>
  );
}