import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

const MOBILE_POINT = 'md';

export function useMobile(mobilePoint: 'md' | 'sm' | 'lg' | 'xl' | 'xs' = MOBILE_POINT) {
  const theme = useTheme();

  return {
    isMobile: useMediaQuery(theme.breakpoints.down(mobilePoint)),
    mobileSize: `${theme.breakpoints.values[mobilePoint]}px`,
  };
}