/*
  @author: Hemal
  File: useIsMobile.tsx
  Description: This file contains the useIsMobile hook, which determines if the current viewport width is below a given breakpoint.
*/
import { useEffect, useState } from 'react';

/**
 * Custom React hook to determine if the current viewport width is below a given breakpoint
 *
 * @param breakpoint - The screen width threshold to determine "mobile" view (default is 992px)
 * @returns A boolean indicating whether the screen width is considered mobile
 */
const useIsMobile = (breakpoint: number = 992): boolean => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    /**
     * Updates the isMobile state based on the current window width
     */
    const handleResize = () => {
      setIsMobile(window.innerWidth < breakpoint);
    };

    // Call once on mount
    handleResize();

    // Listen to resize
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [breakpoint]);

  return isMobile;
};

export default useIsMobile;