import { useState, useEffect } from 'react';

type DeviceType = 'desktop' | 'tablet' | 'mobile';

const useDeviceType = (): DeviceType => {
  const [deviceType, setDeviceType] = useState<DeviceType>(() => {
    if (typeof window !== 'undefined') {
      return getDeviceType(window.innerWidth);
    }
    return 'desktop'; // default value
  });

  useEffect(() => {
    const handleResize = () => {
      setDeviceType(getDeviceType(window.innerWidth));
    };

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

  return deviceType;
};

const getDeviceType = (width: number): DeviceType => {
  if (width <= 768) {
    return 'mobile';
  } else if (width <= 1024) {
    return 'tablet';
  } else {
    return 'desktop';
  }
};

export default useDeviceType;