import React, {Component, PropTypes} from 'react';

export default class ProductsHeroImage extends Component {
  static propTypes = {
    bannerText: PropTypes.string.isRequired,
    bannerButtonText: PropTypes.string.isRequired,
    image: PropTypes.string.isRequired
  }
  render() {
    const {bannerText, bannerButtonText} = this.props;
    const heroImage = require('./kitchenHeroImage.jpg');
    const styles = require('./ProductsHeroImage.scss');
    return (
      <div className={styles.heroImageContainer}>
        <img className="img-responsive" src={heroImage}/>
        <div className={styles.bannerTextContainer}>
          <h2 className={styles.bannerText}>{bannerText}</h2>
        </div>
        <div className={styles.bannerButtonContainer}>
          <button className={ styles.bannerButtonText + ' btn btn-primary'}>{bannerButtonText}</button>
        </div>
      </div>
    );
  }
}
