import * as React from "react";

interface IProps {
  title: string;
  details: string;
  subtitle: string;
  viewButton: React.ReactElement<any>;
  image: string;
}

export class Product extends React.Component<IProps> {
  public render(): JSX.Element {
    return (
        <div className="products_block_in col-lg-4 col-md-6 col-sm-6 col-xs-12">
            <div className="our_product afclr">
                <div className="prod_img afclr">
                    <a>
                        <img src={this.props.image}/>
                    </a>
                </div>
                <div className="product_vies_btn afclr">
                    {/* tslint:disable-next-line */}
                    <a dangerouslySetInnerHTML={{__html: `${this.props.details} <i class='la la-long-arrow-right' />`}} />
                </div>
                <div className="tour_text_overlay">
                    <div className="product_hover afclr">
                        <h3>{this.props.title}</h3>
                        <p>{this.props.subtitle}</p>
                        <div className="product_hover_btn afclr">{this.props.viewButton}</div>
                    </div>
                </div>
            </div>
        </div>
    );
  }
}