import React, { Component } from 'react';
import './index.less';

export default class HardInput extends Component {
  render() {
    const { selected, answer, show, list = [], otherList = [] } = this.props;
    return (
      <div className={`hard-input ${selected ? 'selected' : ''}`}>
        {list.map((item, index) => {
          return (
            <div className={`item ${index === answer ? 'true' : 'false'} ${show ? 'show' : ''}`}>
              <div className="text">{item.text}</div>
              <div className="icon" />
            </div>
          );
        })}
        {otherList.map(item => {
          return (
            <div className="other-item">
              <div className="text">{item.text}</div>
            </div>
          );
        })}
      </div>
    );
  }
}