import React from 'react';
import IconCaret from './icons/IconCaret';

class Accordion extends React.Component {
  state = {
    open: false
  };

  constructor(props) {
    super(props);

    this.state.open = !!props.open;

    this.onToggle = this.onToggle.bind(this);
  }

  onToggle() {
    this.setState({ open: !this.state.open });
  }

  render() {
    return (
      <div className="box box-card">
        <div className="box-header box-header-action">
          <div>
            <div className="box-title">{this.props.title}</div>
            <div className="box-subtitle">{this.props.desc}</div>
          </div>
          <button type="button" onClick={this.onToggle} className={ 'accordion-toggle' + (this.state.open ? ' show' : '') }>
            <IconCaret/>
            Expand
          </button>
        </div>
        <div className={ 'accordion-content' + (this.state.open ? ' show' : '') }>
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default Accordion;
