import { useEffect, useState } from 'react';

export const useIsSmallScreen = () => {
  const [isSmall, setIsSmall] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia('(max-width: 479px)');

    // Set initial value
    setIsSmall(mediaQuery.matches);

    // Update state when viewport changes
    const handleResize = (event: MediaQueryListEvent) => {
      setIsSmall(event.matches);
    };

    mediaQuery.addEventListener('change', handleResize);

    return () => mediaQuery.removeEventListener('change', handleResize);
  }, []);

  return isSmall;
};
