text: /* eslint-disable camelcase */
  import React from 'react'
  import {Card, Image} from 'semantic-ui-react'
  import Img from 'gatsby-image'
  import {Link} from 'gatsby'
  
  const mapProductsToItems = products =>
    products.map(({ name, id, meta, mainImage, description, image }) => {
      const price = description || null
      return {
        as: Link,
        to: `/product/${id}/`,
        childKey: id,
        image: (
          <Image>
            <img
              src={image}
              fixed={image}
              objectFit="cover"
              objectPosition="50% 50%"
              alt=""
            />
          </Image>
        ),
        header: name,
        meta: <Card.Meta style={{color: 'dimgray'}}>{price}</Card.Meta>,
      }
    })
  
  export default ({products}) => (
    <Card.Group items={mapProductsToItems(products)} itemsPerRow={2} stackable />
  )
  