import React, { useCallback, useContext } from 'react';
import { ProductContext } from './ProductCard';
import { ProductButtonsProps } from '../interfaces';

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

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

  const { counter, maxCount, handleIncreseBy } = useContext(ProductContext);

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

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