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

export type SidebarContextValue = {
  width: number;
  setWidth: Dispatch<SetStateAction<number>>;
};

const SidebarContext = createContext<SidebarContextValue>({
  width: null,
  setWidth: () => null,
});

export const SidebarProvider = ({ children }) => {
  const [width, setWidth] = useState<number>(null);

  return (
    <SidebarContext.Provider value={{ width, setWidth }}>
      {children}
    </SidebarContext.Provider>
  );
};

export const useSidebar = () => useContext(SidebarContext);

export const SidebarConsumer = SidebarContext.Consumer;

export default SidebarContext;