import { ProductCardProps } from "../components/ProductCard";
import { TitleProps } from "../components/Title";
import { ImageProps } from "../components/Image";
import { ButtonsProps as ButtonsComponentProps } from "../components/Buttons";

export interface Product {
  id: string;
  title: string;
  image?: string;
}

export interface ButtonsProps {
  counter: number;
  handleIncreaseBy: (value: number) => void;
}

export interface ProductContextProps extends ButtonsProps {
  product: Product;
  maxCount?: number;
  isMaxCountReached: boolean;
}

export interface ProductHOCProps {
  ({ children, product }: ProductCardProps): JSX.Element;
  Image: ({ image, className }: ImageProps) => JSX.Element;
  Title: ({ title, className }: TitleProps) => JSX.Element;
  Buttons: ({ className }: ButtonsComponentProps) => JSX.Element;
}

export interface OnChangeArgs {
  product: Product;
  count: number;
}