text: import React from 'react'
  import PropTypes from 'prop-types'
  
  import mirror1 from '../images/mirror1.jpg'
  import mirror2 from '../images/mirror2.jpg'
  import mirror3 from '../images/mirror3.jpg'
  
  class Main extends React.Component {
    render() {
  
      let close = <div className="close" onClick={() => {this.props.onCloseArticle()}}></div>
  
      return (
        <div ref={this.props.setWrapperRef} id="main" style={this.props.timeout ? {display: 'flex'} : {display: 'none'}}>
  
          <article id="about" className={`${this.props.article === 'about' ? 'active' : ''} ${this.props.articleTimeout ? 'timeout' : ''}`} style={{display:'none'}}>
            <h2 className="major">About Us</h2>
            <p>Make your next party or event Enchanted with our full size mirror photobooth!<br />
              You will receive:
            <li>Interactive, touch screen mirror</li>
            <li>Unlimited, immediate photo prints with custom overlay</li>
            <li>Professional setup and assistance for your event</li>
            </p>
            {close}
          </article>
  
          <article id="gallery" className={`${this.props.article === 'gallery' ? 'active' : ''} ${this.props.articleTimeout ? 'timeout' : ''}`} style={{display:'none'}}>
            <h2 className="major">Gallery</h2>
            <span className="image main"><img src={mirror1} alt="" /></span>
            <span className="image main"><img src={mirror2} alt="" /></span>
            <span className="image main"><img src={mirror3} alt="" /></span>
            {close}
          </article>
  
          <article id="contact" className={`${this.props.article === 'contact' ? 'active' : ''} ${this.props.articleTimeout ? 'timeout' : ''}`} style={{display:'none'}}>
            <h2 className="major">Contact</h2>
            <h3>Call</h3>
            <p>(314) 306-1780</p>
            <h3>Email</h3>
            <form method="post" action="#">
              <div className="field half first">
                <label htmlFor="name">Name</label>
                <input type="text" name="name" id="name" />
              </div>
              <div className="field half">
                <label htmlFor="email">Email</label>
                <input type="text" name="email" id="email" />
              </div>
              <div className="field">
                <label htmlFor="message">Message</label>
                <textarea name="message" id="message" rows="4"></textarea>
              </div>
              <ul className="actions">
                <li><input type="submit" value="Send Message" className="special" /></li>
                <li><input type="reset" value="Reset" /></li>
              </ul>
            </form>
            <ul className="icons">
              <li><a href="https://www.facebook.com/Enchanted-mirror-STL-1972381253081384/" className="icon fa-facebook"><span className="label">Facebook</span></a></li>
            </ul>
            {close}
          </article>
  
        </div>
      )
    }
  }
  
  Main.propTypes = {
    route: PropTypes.object,
    article: PropTypes.string,
    articleTimeout: PropTypes.bool,
    onCloseArticle: PropTypes.func,
    timeout: PropTypes.bool,
    setWrapperRef: PropTypes.func.isRequired,
  }
  
  export default Main
  