import React, { useCallback, useContext } from "react"
import styles from '../styles/styles.module.css'
import { ProductContext } from "../context/ProductContext"

export interface Props {
  className?: string
    style?: React.CSSProperties
}

export const ProductButtons = ({ className , style }: Props) => {

  const { count, increaseBy, maxCount } = useContext(ProductContext)

  const isMaxReached = useCallback(()=> !!maxCount && count === maxCount, [count, maxCount])

  return (
    <div className={`${styles.buttonsContainer} ${className}`} style={style}>
      <button onClick={() => increaseBy(-1)} className={styles.buttonMinus}>-</button>
      <div className={styles.countLabel}>{count}</div>
      <button onClick={() => increaseBy(1)} className={`${styles.buttonAdd} ${isMaxReached() ? styles.disabled : ''}`}>+</button>
    </div>
  )
}