import * as React from 'react';

import ProductCard from '../ProductCard/ProductCard';

import '../../styles/styles.scss';

function Listing({ products, images }) {
  const [page, setPage] = React.useState(1);
  const loadMore = () => {
    setPage(page + 1);
  };

  const getImages = (i) =>
    images.filter((image) => i.includes(image.fluid.originalName));

  return (
    <div className="listing">
      {products.slice(0, page * 2).map((product, i) => (
        <ProductCard
          product={product}
          key={i}
          images={getImages(product.images)}
        />
      ))}
      <div className="center m-b-64">
        {products.length > page * 2 ? (
          <button className="button button__secondary" onClick={loadMore}>
            View More
          </button>
        ) : null}
      </div>
    </div>
  );
}

export default Listing;
