import React from 'react';

export default class EmptyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
  }

  componentDidMount() {

  }

  render() {
  	const type = this.props.type;
  	if(type == "empty"){
	  	return(
	  		<div style={{textAlign: 'center', padding: '20px'}}>
	  			<style>
					@import url('https://fonts.googleapis.com/css?family=Raleway');
				</style>
	  			<div className="row">
	  				<div className="col s12">
              <img src="../../../../assets/images/emptyState/default2.png" style={Object.assign({filter: "grayscale(5)"}, this.props.imageStyle || {})} width="150px" />
	  				</div>
	  				<div className="col s12" style={{marginTop: '0px'}}>
	  					<h1>{this.props.header}</h1>
	  					<h3 style={{marginTop: '10px', color: '#808080', fontFamily: 'Raleway, sans-serif'}}>{this.props.content}</h3>
	  				</div>
	  			</div>
	  		</div>
	  	);
  	}
    else if(type == "default3"){
      return(
        <div style={{textAlign: 'center', padding: '20px'}}>
          <style>
            @import url('https://fonts.googleapis.com/css?family=Raleway');
          </style>
          <div className="row">
            <div className="col s12">
              <img src="../../../../assets/images/emptyState/default3.png" style={{filter: "grayscale(5)"}} width="250px" />
            </div>
            <div className="col s12" style={{marginTop: '0px'}}>
              <h1>{this.props.header}</h1>
              <h3 style={{marginTop: '10px', color: '#808080', fontFamily: 'Raleway, sans-serif'}}>{this.props.content}</h3>
            </div>
          </div>
        </div>
      );
		}
		else if(type == "default4"){
	  	return(
	  		<div style={{textAlign: 'center', padding: '20px'}}>
	  			<style>
					@import url('https://fonts.googleapis.com/css?family=Raleway');
				</style>
	  			<div className="row">
	  				<div className="col m12">
	  					<img src="../../../../assets/images/emptyState/coupon.png" width="200px" height="200px"/>
	  				</div>
	  				<div className="col m12">
	  					<h1>{this.props.header}</h1>
	  					<h3 style={{marginTop: '10px', color: '#808080', fontFamily: 'Raleway, sans-serif'}}>{this.props.content}</h3>
	  				</div>
	  			</div>
	  		</div>
	  	);
  	}
  	else if(type == "404"){
	  	return(
	  		<div style={{textAlign: 'center', padding: '20px'}}>
	  			<style>
					@import url('https://fonts.googleapis.com/css?family=Raleway');
				</style>
	  			<div className="row">
	  				<div className="col m12">
	  					<img src="../../../../assets/images/emptyState/404.png" width="600px" />
	  				</div>
	  				<div className="col m12">
	  					<h1>{this.props.header}</h1>
	  					<h3 style={{marginTop: '10px', color: '#808080', fontFamily: 'Raleway, sans-serif'}}>{this.props.content}</h3>
	  				</div>
	  			</div>
	  		</div>
	  	);
  	}
  }
}
