import { Breakpoint } from '../../propsValues/breakpoint';
import { useScreenSize } from '../useScreenSize';

/**
 * @deprecated Prefer `useScreenSize` instead.
 */
export const useLayout = (): {
  isMobile: boolean | undefined;
  isExtraSmall: boolean | undefined;
  isSmall: boolean | undefined;
  isMedium: boolean | undefined;
  isLarge: boolean | undefined;
  isExtraLarge: boolean | undefined;
} => {
  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);
  const screenSm = useScreenSize(Breakpoint.SMALL);
  const screenMd = useScreenSize(Breakpoint.MEDIUM);
  const screenLg = useScreenSize(Breakpoint.LARGE);
  const screenXl = useScreenSize(Breakpoint.EXTRA_LARGE);

  return {
    isMobile: screenSm != null ? !screenSm : undefined,
    isExtraSmall: screenXs,
    isSmall: screenSm,
    isMedium: screenMd,
    isLarge: screenLg,
    isExtraLarge: screenXl,
  };
};