const TableData = ({ totalUsers, loading }) => {
  let monthDates = Object.values(totalUsers)[1];
  let resultTable = Object.values(totalUsers)[0];
  const resultData = Object.entries(resultTable).map(([key, value]) => ({
    key,
    value,
  }));

  if (loading) {
    return <div>Data is loading...</div>;
  }

  return (
    <Table>

      <TableBody>
        {resultData.map((item, index) => {
          // console.log(item)
          return (
            <TableRow key={index}>
              <TableCell>
                {item.key === "null" ? "NO COLLEGE" : item.key}
              </TableCell>
              {item.value.map((res, index) => {
                console.log(res)
                const keys = Object.keys(res);
                const secondKey = keys[1];
                const secondValue = res[secondKey];

                return <TableCell key={index}>{secondValue}</TableCell>;
              })}
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
};

export default TableData;