import React, {
  createContext,
  Dispatch,
  ReactNode,
  SetStateAction,
  useState,
} from 'react';

export const CollapsibleContext = createContext<{
  openCollapsible: boolean;
  setOpenCollapsible: Dispatch<SetStateAction<boolean>>;
} | null>(null);

export const CollapsibleProvider = ({ children }: { children: ReactNode }) => {
  const [openCollapsible, setOpenCollapsible] = useState<boolean>(false);
  return (
    <CollapsibleContext.Provider
      value={{ openCollapsible, setOpenCollapsible }}
    >
      {children}
    </CollapsibleContext.Provider>
  );
};