import styles from '../styles/styles.module.css';
import { useProducts } from '../hooks/useProducts';
import React, { createContext } from 'react';
import { ProductContextProps, ProductCardProps } from '../interfaces/types';

export const ProductContext = createContext({} as ProductContextProps);
const { Provider } = ProductContext;

export const ProductCard = ({
  children,
  product,
  className,
  style,
  onChange,
  value,
  initialValue,
}: ProductCardProps) => {
  const {
    counter,
    increasBy,
    maxCount,
    isMaxCountReached,
    reset,
  } = useProducts({
    onChange,
    product,
    value,
    initialValue,
  });

  return (
    <Provider
      value={{
        counter,
        increasBy,
        product,
        maxCount,
      }}
    >
      <div className={`${styles.productCard} ${className}`} style={style}>
        {children({
          count: counter,
          isMaxCountReached,
          maxCount: initialValue?.maxCount,
          product,

          increasBy,
          reset,
        })}
      </div>
    </Provider>
  );
};