import React, { FC, PropsWithChildren } from 'react'
import { Size, useSize } from './useSize'
import { breakpointList } from '../../theme'

export interface BreakpointContextProps {
	size: Size,
	breakpointList: typeof breakpointList
}

export const BreakpointContext = React.createContext<BreakpointContextProps>({ breakpointList, size: {} } as any)


export const BreakpointProvider: FC<PropsWithChildren> = ({ children }) => {
	const size = useSize()
	return (
		<BreakpointContext.Provider value={{ size, breakpointList }}>{children}</BreakpointContext.Provider>
	)
}
