import React, { Component } from 'react';
import { connect } from 'react-redux';

import Icon from './icon';

class Dresscode extends Component {
	render() {
		return ( 
      <div className="section-container" id="dresscode">
        <div className="dresscode-container">
          <div className="dresscode-header">
            <h1>Dresscode</h1>
            <img src={require('../assets/dresscodeimage.jpg')} className="card-img-top img-fluid dresscodeimage" />
            <h3 className="dresscodequote">La plus belle couleur au monde est celle qui vous va bien.</h3>
          </div>
          <div className="dresscode-body">
            <div className="row">
              <div className="col-md-6 dresscodecard">
                <div className="card">
                  <div className="card-block">
                    <h4 className="card-title">Dames</h4>
                    <p className="card-text">
                      {this.props.language ? 'Coloré, long ou court' : 'Kleurrijk, lang of kort'}
                    </p>
                  </div>
                  <img className="card-img-bottom img-fluid" src={require('../assets/dresses.jpg')} />
                </div>
              </div>
              <div className="col-md-6 dresscodecard">
                <div className="card">
                  <div className="card-block">
                    <h4 className="card-title">
                      {this.props.language ? 'Hommes' : 'Heren'}
                    </h4>
                    <p className="card-text">Suit up!</p>
                  </div>
                  <img className="card-img-bottom img-fluid" src={require('../assets/suit-up.jpeg')} />
                </div>
              </div>
            </div>
          </div>
          <div className="row">
            <Icon />
          </div>
        </div>
      </div>
		);
	}
}

function mapStateToProps(state) {
  return {
    language: state.language
  };
}

export default connect(mapStateToProps)(Dresscode);