import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { addProduct } from "../actions/addProduct";

const ProductListItem = ({ product }) => {
  return (
    <div className="product">
      <img className="product_img" src={product.image} />
      <p>{product.name}</p>
      <p className="bold">$ {product.price}</p>
      <button className="add_card" onClick={() => addProduct(product)}>
        {" "}
        add to cart
      </button>
    </div>
  );
};

export default ({ products = [] }) =>
  products.map((product, i) => {
    return <ProductListItem key={i} product={product} />;
  });


const mapDispatchToProps = dispatch => {
  return bindActionCreators({ addProduct }, dispatch);
};

connect(
  mapDispatchToProps
)(ProductListItem);