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, style }) => (
  <div className="console-container" style={style}>
    <div className="console-close" id="console-close" onClick={onToggleConsole}>
      <FontAwesome
        name={show ? 'toggle-right' : 'toggle-left'}
        className={show ? 'toggle-right' : 'toggle-left'}
      />
    </div>
    <div className="console-title">Console</div>
    <div>{renderLogs(logs)}</div>
  </div>
);

Console.propTypes = {
  style: PropTypes.object,
  logs: PropTypes.array,
  show: PropTypes.bool,
  onToggleConsole: PropTypes.func,
};

export default Console;
