import { useEffect, useState } from 'react';

export const useScreenDetector = () => {
  const [width, setWidth] = useState<number>(0);

  const handleWindowSizeChange = () => {
    setWidth(window.innerWidth);
  };

  useEffect(() => {
    // Only execute this code in the client side (browser)
    if (typeof window !== 'undefined') {
      // Set the initial window width when the component mounts
      setWidth(window.innerWidth);

      // Add event listener for resize
      window.addEventListener('resize', handleWindowSizeChange);

      // Cleanup the event listener on component unmount
      return () => {
        window.removeEventListener('resize', handleWindowSizeChange);
      };
    }
  }, []);

  // Determine screen types based on the window width
  const isMobile = width <= 768;
  const isTablet = width <= 1024;
  const isDesktop = width > 1024;

  return { isMobile, isTablet, isDesktop };
};