import type {Breakpoint} from 'antd'
import { theme} from 'antd'
import {useMediaQuery} from 'react-responsive'

const {useToken} = theme

type ScreenProperty = 'screenXXL' | 'screenXL' | 'screenLG' | 'screenMD' | 'screenSM' | 'screenXS'

const propertyName = (breakpoint: Breakpoint): ScreenProperty => {
    return 'screen' + breakpoint.toUpperCase() as ScreenProperty
}

export default function useBreakpoint(
    breakpoint: Breakpoint
) {
    const {token} = useToken()
    const width: number = token[propertyName(breakpoint)]

    return useMediaQuery({maxWidth: width})
}