import React, { createContext, PropsWithChildren, useContext, useState } from 'react'

type ContextValue = {
  width: number,
  setWidth: (nextWidth: number) => void
}
const context = createContext<ContextValue>({
  width: 0,
  setWidth: () => undefined
})

export function useScrollbarWidth() {
  return useContext(context)
}

export default function ScrollbarWidthProvider({ children }: PropsWithChildren<{}>) {
  const [width, setWidth] = useState(0)
  return (
    <context.Provider value={{ width, setWidth }}>{children}</context.Provider>
  )
}