import React from "react";
import { useStyles } from "../dashboardStyles";
import { Grid, useTheme } from "@mui/material";
import ProtectedComponent from "../../../components/ProtectedComponent";
import TotalNumber from "../components/TotalNumber";

const SuperAdminTotals = ({ isLoading, data }) => {
  const classes = useStyles();
  const theme = useTheme();

  const viewAllClick = (tab) => {
    if (false) return;
    // if (!user?.permission?.includes("STATISTIC_DASHBOARD")) return;
    let path = "/";
    // navigate(path, { state: { tab } });
  };

  const { totalAccounts, registrationRequest, rejected, registered } = data;

  return (
    <ProtectedComponent>
      <Grid container className={classes.numbers} spacing={2.3}>
        <Grid item>
          <TotalNumber
            heading={"Total Accounts"}
            isLoading={isLoading}
            value={totalAccounts}
            helperText={"Clinics"}
          />
        </Grid>
        <Grid item>
          <TotalNumber
            heading={`Registration Request`}
            isLoading={isLoading}
            viewAllClick={() => viewAllClick(true)}
            value={registrationRequest}
            helperText={"Clinics"}
          />
        </Grid>
        <Grid item>
          <TotalNumber
            heading={`Approved`}
            isLoading={isLoading}
            viewAllClick={() => viewAllClick(false)}
            value={registered}
            helperText={"Clinics"}
            color={theme.palette.grey[52]}
          />
        </Grid>
        <Grid item>
          <TotalNumber
            heading={`Rejected`}
            isLoading={isLoading}
            viewAllClick={() => viewAllClick(false)}
            value={rejected}
            helperText={"Clinics"}
            color={theme.palette.grey[57]}
          />
        </Grid>
      </Grid>
    </ProtectedComponent>
  );
};

export default SuperAdminTotals;
