{"size": 1681, "ext": "js", "max_stars_repo_path": "src/pages/home/Inventory.js", "max_stars_repo_name": "locary-ph/merchant-dashboard", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/home/Inventory.js", "max_issues_repo_name": "locary-ph/merchant-dashboard", "max_issues_repo_issues_event_min_datetime": "2021-08-28T04:26:49.000Z", "max_issues_repo_issues_event_max_datetime": "2021-11-13T10:11:44.000Z", "max_forks_repo_path": "src/pages/home/Inventory.js", "max_forks_repo_name": "locary-ph/merchant-dashboard", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 18, "max_forks_count": null, "avg_line_length": 27.5573770492, "max_line_length": 77, "alphanum_fraction": 0.4699583581}
/**
 * @format
 */

import React, { useContext } from "react";
import { Badge, Card, CardHeader, Row, Table } from "reactstrap";
import LoginContext from "../../contexts/LoginContext";

function Inventory() {
  const headers = ["Product", "Quantity", "Status"];
  const { userInventory } = useContext(LoginContext);
  const products = userInventory;
  console.log(products);

  return (
    <Card className="shadow">
      <CardHeader className="bg-transparent">
        <Row className="align-items-center">
          <div className="col">
            <h6 className="text-uppercase text-muted ls-1 mb-1">Products</h6>
            <h2 className="mb-0">Inventory</h2>
          </div>
        </Row>
      </CardHeader>
      <Table responsive>
        <thead className="thead-light">
          <tr>
            {headers.map((header) => (
              <th scope="col">{header}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {products.map((product) => (
            <tr>
              <th scope="row">
                <span className="mb-0 text-sm">{product.name}</span>
              </th>
              <td>{product.qty}</td>
              {/* <td>{product.sold}</td> */}
              <td>
                {product.qty ? (
                  <Badge className="text-uppercase" color="success">
                    in stock
                  </Badge>
                ) : (
                  <Badge className="text-uppercase" color="danger">
                    out of stock
                  </Badge>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </Card>
  );
}

export default Inventory;
