import React from 'react';
import PropTypes from 'prop-types';
import FontAwesome from 'react-fontawesome';

import './Console.css';

const renderLogs = (logs = []) => logs.map((log, i) => (<div key={`div-${i}`}><span key={`span-${i}`}>{log}</span></div>));

const Console = ({ logs, show, onToggleConsole }) => (
  <div className="console-container">
    <FontAwesome
      name={show ? "toggle-down" : "toggle-up"}
      size="2x"
      className="pull-right"
      onClick={onToggleConsole}
    />
    <div className="console-label pull-right">
      Console
    </div>
    <div>
      {renderLogs(logs)}
    </div>
  </div>
);

Console.propTypes = {
  logs: PropTypes.array,
};

export default Console;
