import { useState, useEffect, useCallback, useRef } from 'react';

const useWindowSize = () => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  const [screenSize, setScreenSize] = useState('lg');
  const widthRef = useRef(window.innerWidth);

  const handleResize = useCallback(() => {
    widthRef.current = window.innerWidth;
    setWindowWidth(widthRef.current);

    if (widthRef.current < 768) {
      setScreenSize('xs');
    } else if (widthRef.current >= 768 && widthRef.current < 992) {
      setScreenSize('md');
    } else {
      setScreenSize('lg2');
    }
  }, []);

  useEffect(() => {
    window.addEventListener('resize', handleResize);
    handleResize();

    return () => {
      window.removeEventListener('resize', handleResize);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return { windowWidth, screenSize };
};

export default useWindowSize;
