import * as React from "react";

interface IProps {
    heading: string;
    subHeading: string;
    viewAllButton: React.ReactElement<any>;
    bgImage1: string;
    bgImage2: string;
}

export class Category extends React.Component<IProps> {
  public render(): JSX.Element {
    return (
        <div className="products_section afclr">
            <div className="product_top_img afclr">
                <img src={this.props.bgImage1}/>
            </div>
            <div className="product_top_img_2 afclr">
                <img src={this.props.bgImage2}/>
            </div>
            <div className="container">
                <div className="heading">
                    <h2>{this.props.heading}</h2>
                </div>
                <div className="heading">
                    <h1>{this.props.subHeading}</h1>
                </div>
                <div className="products_block row afclr">
                    {this.props.children}
                </div>
                <div className="view_all_btn afclr">
                    {this.props.viewAllButton}
                </div>
            </div>
        </div>
    );
  }
}