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

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

export default function Card({item, numberInCart}) {
  let featuredImage = item.images.filter(i=>i.featured)[0]
  if(!featuredImage) featuredImage = item.images[0]

  return (
    <div className={styles.card}>
      <h3><Link href={`/store/item/${item.urlslug}`}><a>{item.name}</a></Link></h3>
      {featuredImage && (
        <div className={styles['card-image']}>
          <img src={`/api/images/${featuredImage.uuid}/thumb`} />
        </div>
      )}
      <div className={styles['card-text']}>{item.description}</div>
        <ul className={styles['card-details'] + (item.number_in_stock > 0 ? '' : ' ' + styles['out-of-stock'])}>
          <li className={styles['number-in-stock']}>
            {
              item.number_in_stock > 0
                ? `${item.number_in_stock} pairs in stock`
                : 'Currently out of stock'
            }
          </li>
          <li><Link href={`/store/sock/${item.urlSlug}`}><a>Details</a></Link></li>
          {
            item.number_in_stock > 0 && (
              <li>
                <a disabled={!(item.number_in_stock > 0)}>Add to Cart</a>
              </li>
            )
          }
        </ul>
    </div>
  )
}