import React from 'react'

import usePulledGrid from 'use-pulled-grid'

const ProductCardList = ({ products }) => {
  const { styles } = usePulledGrid({
    columnMinWidth: 100, // Each grid items never get smaller than 100px
    gridGap: 10,
  })

  return (
    <div style={styles.container}>
      {products.map(product => (
        {/* Wrappers to each child are required for css-animated-grid and fallback style of grid gap */}
        <div key={product.id} style={styles.itemWrapper}>
            <ProductCard {...product}/>
        </div>
      )}
    </div>
  )
}

/* @jsx jsx */

import React from 'react'
import { css, jsx } from '@emotion/core'

import usePulledGrid from 'use-pulled-grid'

const ProductCardList = ({ products }) => {
  const { styles } = usePulledGrid({
    columnMinWidth: 100,
    gridGap: 10,
  })

  const containerCss = React.useMemo(() => (
    css(styles.container)
  ), [styles.container])

  const itemWrapperCss = React.useMemo(() => (
    css(styles.itemWrapper)
  ), [styles.itemWrapper])

  return (
    <div css={containerCss}>
      {products.map(product => (
        <div key={product.id} css={itemWrapperCss}>
          <ProductCard {...product}/>
        </div>
      )}
    </Container>
  )
}