text: import React, { useState } from "react";
  import clsx from "clsx";
  import moment from "moment";
  import PropTypes from "prop-types";
  import {
    Card,
    CardContent,
    Grid,
    Table,
    TableRow,
    TableCell,
    TableHead,
    TableBody,
    Typography,
    colors,
    makeStyles,
  } from "@material-ui/core";
  import NumberFormat from "react-number-format";
  
  const useStyles = makeStyles((theme) => ({
    root: {
      height: "100%",
    },
    avatar: {
      backgroundColor: colors.red[600],
      height: 56,
      width: 56,
    },
    differenceIcon: {
      color: colors.red[900],
    },
    differenceValue: {
      color: colors.red[900],
      marginRight: theme.spacing(1),
    },
    table: {
      minWidth: "100%",
      maxWidth: "100%",
    },
    tableRow: {
      backgroundColor: colors.teal[400],
    },
  }));
  
  const Limits = ({ className, value, ...rest }) => {
    const classes = useStyles();
    const [arr, setArr] = useState([]);
  
    async function get() {
      try {
        const data = await value;
        const ar = await data[0];
        if (ar) {
          setArr(ar);
        }
        return;
      } catch (err) {
        console.log("error fetching data..", err);
      }
    }
    get();
  
    return (
      <Card className={clsx(classes.root, className)} {...rest}>
        <CardContent>
          <Grid item>
            <Typography color="textSecondary" gutterBottom variant="h6">
              KEY FINANCIALS
            </Typography>
            <Table
              className={classes.table}
              size="small"
              aria-label="simple table"
            >
              <TableHead>
                <TableRow>
                  <TableCell></TableCell>
                  <TableCell align="right"></TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                <TableRow className={classes.tableRow}>
                  <TableCell component="th" scope="row" color="pink">
                    Year
                  </TableCell>
                  <TableCell align="right">
                    {moment(arr.financials_reporting_period).format("YYYY")}
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell component="th" scope="row">
                    Sales
                  </TableCell>
                  <TableCell align="right">
                    <NumberFormat
                      value={arr.sales}
                      displayType={"text"}
                      thousandSeparator={true}
                      prefix={"$"}
                    />
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell component="th" scope="row">
                    EBIT
                  </TableCell>
                  <TableCell align="right">
                    <NumberFormat
                      value={arr.ebit}
                      displayType={"text"}
                      thousandSeparator={true}
                      prefix={"$"}
                    />
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell component="th" scope="row">
                    Working Capital
                  </TableCell>
                  <TableCell align="right">
                    <NumberFormat
                      value={arr.working_capital}
                      displayType={"text"}
                      thousandSeparator={true}
                      prefix={"$"}
                    />
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell component="th" scope="row">
                    Retained Earnings
                  </TableCell>
                  <TableCell align="right">
                    <NumberFormat
                      value={arr.retained_earnings}
                      displayType={"text"}
                      thousandSeparator={true}
                      prefix={"$"}
                    />
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell component="th" scope="row">
                    Total Assets
                  </TableCell>
                  <TableCell align="right">
                    <NumberFormat
                      value={arr.total_assets}
                      displayType={"text"}
                      thousandSeparator={true}
                      prefix={"$"}
                    />
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell component="th" scope="row">
                    Market Value of Equity
                  </TableCell>
                  <TableCell align="right">
                    <NumberFormat
                      value={arr.equity_market_value}
                      displayType={"text"}
                      thousandSeparator={true}
                      prefix={"$"}
                    />
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </Grid>
        </CardContent>
      </Card>
    );
  };
  
  Limits.propTypes = {
    className: PropTypes.string,
  };
  
  export default Limits;
  