import { useEffect, useState } from 'react';

import { useBreakpointValue } from '@chakra-ui/react';
import { useWindowSize } from 'react-use';

export const isBrowser: boolean = typeof window !== 'undefined';

export const useIsMobile = () => useBreakpointValue({ base: true, md: false });

export const useIsLandscape = (): { isLandscape: boolean } => {
  const [isLandscape, setIsLandscape] = useState(false);
  const windowsSize = useWindowSize();
  useEffect(() => {
    const data = windowsSize.width / windowsSize.height > 1;
    setIsLandscape(data);
  }, [setIsLandscape, windowsSize.width, windowsSize.height, windowsSize]);
  return { isLandscape };
};
