import React from 'react';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Avatar from '@mui/material/Avatar';
import { Done as DoneIcon, Error as ErrorIcon } from '@mui/icons-material';
import { red, green } from '@mui/material/colors';

const Test = ({ test }) => {
  const successSx = theme => ({
    backgroundColor: green[500],
    marginRight: theme.spacing(1),
  });
  const failureSx = theme => ({
    backgroundColor: red[500],
    marginRight: theme.spacing(1),
  });

  return (
    <ListItem>
      {test.state === 'passed' && (
        <Avatar sx={successSx}>
          <DoneIcon />
        </Avatar>
      )}
      {test.state === 'failed' && (
        <Avatar sx={failureSx}>
          <ErrorIcon />
        </Avatar>
      )}
      <ListItemText
        primary={test.title}
        secondary={test.err ? test.err : 'ok'}
      />
    </ListItem>
  );
};

export default Test;