import { Box, Text } from '@chakra-ui/react';
import { isNil } from 'lodash';

const LogItem = ({ log }) => {
  const { time, message, success } = log;

  return (
    <Text>
      {time}:{' '}
      {!isNil(success) ? (
        <Text color={success ? 'green' : 'red.500'} as="span">
          {message}
        </Text>
      ) : (
        <Text as="span">{message}</Text>
      )}
    </Text>
  );
};

const LogViewer = ({ logs }) => {
  return (
    <Box bg="black" color="white" p={4} overflowY="auto" height="200px" overflow={scroll}>
      {logs.length === 0 ? <Text>No logs</Text> : logs.map((log, index) => <LogItem key={index} log={log} />)}
    </Box>
  );
};

export default LogViewer;
