import { List } from 'atoms';
import { ProductCard } from 'molecules';
import React, { Component } from 'react';
import styles from './ProductList.css';

class ProductList extends Component {
  render() {
    const productCardRenderer = dataItem => (
      <ProductCard image={dataItem.image} price={dataItem.price} originalPrice={dataItem.originalPrice} key={dataItem.id} />
      );
    return (
      <section>
        <div className={styles.wrapper}>
          <List
            // Default propertie goes here

            // End of default properties

            // Overriden properties
            {...this.props}

            // Non overridable properties goes here
            childRenderer={productCardRenderer}
          />
        </div>
      </section>
    );
  }
}

export default ProductList;