import { Box, List, ListItem, ListItemIcon, ListItemText, Typography } from "@mui/material";
import { NfcCommand } from "pages/Nfc";

interface Props {
  commands: NfcCommand[];
}

export default function CommandHistory(props: Props) {
  const { commands } = props;
  return (
    <Box>
      <Typography style={{ fontSize: 20, fontWeight: 650 }}>Session Command History</Typography>

      <Box height={250} overflow="scroll" border={"2px solid white"} borderRadius={10}>
        <List>
          {commands.map((command, i) => (
            <ListItem key={i}>
              <ListItemIcon style={{ marginRight: 10 }}>
                <Typography style={{ fontWeight: 650 }}>
                  {command.command + " : " + command.type}
                </Typography>
              </ListItemIcon>
              <ListItemText>
                <Typography>{command.data}</Typography>
              </ListItemText>
            </ListItem>
          ))}
        </List>
      </Box>
    </Box>
  );
}
