import { useEffect, useState } from 'react';

function getViewportWidth() {
  if (typeof window === 'undefined') {
    return 1440;
  }

  return window.innerWidth;
}

export function useViewport() {
  const [width, setWidth] = useState(getViewportWidth);

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return {
    width,
    isWideDesktop: width >= 1500,
    isDesktop: width >= 1180,
    isTablet: width < 1180 && width >= 760,
    isMobile: width < 760,
  };
}