1  import React from 'react'
 2  import PropTypes from 'prop-types'
 3  import categories from '../../common/utils/categories'
 4  import styles from './Categories.module.scss'
 5  import categoryImage from './Categories.utils'
 6  import ViewAll from '../../common/components/ViewAll'
 7  
 8  const Categories = props => {
 9    const { select } = props
10    const handleClick = category => select(category)
11  
12    return (
13      <>
14        <div className={styles.header}>
15          <h2 className={styles.headline}>Categories</h2>
16          <ViewAll size="large" />
17        </div>
18        <div className={styles.categories}>
19          {categories.map(category => (
20            <button
21              className={
22                styles[category.key]
23                  ? [styles.category, styles[category.key]].join(' ')
24                  : styles.category
25              }
26              key={category.key}
27              type="button"
28              onClick={handleClick.bind(this, category.key)}
29            >
30              <img
31                className={styles.icon}
32                src={categoryImage(category.key)}
33                alt="Category icon"
34              />
35              <p>{category.value}</p>
36            </button>
37          ))}
38        </div>
39      </>
40    )
41  }
42  
43  Categories.propTypes = {
44    select: PropTypes.func.isRequired,
45  }
46  
47  export default Categories