import React from 'react'
import Link from 'next/link'

import styles from '../card/style.module.css'

export default function CategoryCard({category}) {
  const count = category.items ? category.items.length : category.item_count

  return (
    <div className={styles.card} style={{display: 'inline-block', maxWidth: 300, margin: 16}}>
      <h3><Link href={`/store/category/${category.urlslug}`}><a>{category.name}</a></Link></h3>
      <div className={styles['card-text']} style={{textAlign: 'center'}}>{category.description}</div>
        <ul className={styles['card-details']}>
          <li className={styles['number-in-stock']}>
            {count} item{count !== 1 ? 's' : ''}
          </li>
        </ul>
    </div>
  )
}