import React, { JSX } from 'react'
import { useProduct } from '../hooks/useProduct'
import styles from '../styles/styles.module.css'
import { Provider } from '../context/ProductContext'
import { InitialValues, onChangeArgs, Product, ProductCardHandlers } from '../interfaces/product.interface'

export interface Props {
  product: Product
  // children?: ReactElement | ReactElement[]
  children: (args: ProductCardHandlers) => JSX.Element
  className?: string
  style?: React.CSSProperties
  value?: number
  onChange?: (args: onChangeArgs) => void
  initialValues?: InitialValues
}

export const ProductCard = ({ children, product, className, style, onChange, value, initialValues }: Props) => {

  const { count, increaseBy, maxCount, isMaxCountReached, reset } = useProduct({ onChange, product, value, initialValues })

  return (
    <div className={`${styles.productCard} ${className}`} style={style}>
      <Provider value={{
        count,
        maxCount,
        increaseBy,
        product
      }}>
        {children({
          count,
          isMaxCountReached,
          maxCount: initialValues?.maxCount,
          reset,
          increaseBy,
          product
        })}
      </Provider>
    </div>
  )
}