import { BoxSpace } from '../silke-box';
import React, { useContext } from 'react';
import { SilkeButtonProps } from './silke-button';

type ButtonContextType = Pick<SilkeButtonProps, 'kind' | 'size'> & {
  /** Used by buttons set */
  gap?: BoxSpace;
  disableSubmit?: boolean;
};
type ButtonContextProps = { children: React.ReactNode } & ButtonContextType;

const Context = React.createContext<ButtonContextType>({});
Context.displayName = 'SilkeButtonContext';
export function useButtonContext() {
  return useContext(Context);
}

export default function ButtonContext({ children, ...rest }: ButtonContextProps) {
  const currentContext = useContext(Context);
  return <Context.Provider value={{ ...currentContext, ...rest }}>{children}</Context.Provider>;
}