import React from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Typography
} from "@material-ui/core";
import Box from "@material-ui/core/Box";

const MachineLog = () => {
  const history = [
    { date: "2020-01-05", customerId: "11091700", amount: 3 },
    { date: "2020-01-02", customerId: "Anonymous", amount: 1 }
  ];
  return (
    <Box margin={1}>
      <Typography variant="h6" gutterBottom component="div">
        History
      </Typography>
      <Table size="small" aria-label="purchases">
        <TableHead>
          <TableRow>
            <TableCell>Date</TableCell>
            <TableCell>Customer</TableCell>
            <TableCell align="right">Amount</TableCell>
            <TableCell align="right">Total price ($)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {history.map(historyRow => (
            <TableRow key={historyRow.date}>
              <TableCell component="th" scope="row">
                {historyRow.date}
              </TableCell>
              <TableCell>{historyRow.customerId}</TableCell>
              <TableCell align="right">{historyRow.amount}</TableCell>
              <TableCell align="right">
                {Math.round(historyRow.amount * 5 * 100) / 100}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Box>
  );
};

export default MachineLog;