import { useState, useEffect } from 'react';

type Breakpoints = {
  mobile: number;
  tablet: number;
  desktop: number;
};

const screenBreakPoints: Breakpoints = {
  mobile: 768,
  tablet: 1024,
  desktop: 1280,
};

export function useScreenSize() {
  const [screenSize, setScreenSize] = useState<'mobile' | 'tablet' | 'desktop'>('desktop');

  useEffect(() => {
    if (typeof window === 'undefined') return;

    const checkScreenSize = () => {
      const width = window.innerWidth;
      const { mobile, tablet } = screenBreakPoints;

      if (width < mobile) {
        setScreenSize('mobile');
      } else if (width >= mobile && width < tablet) {
        setScreenSize('tablet');
      } else {
        setScreenSize('desktop');
      }
    };

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

  // Para SSR, siempre devolvemos 'desktop' como fallback

  return {
    screenSize,
    isMobile: screenSize === 'mobile',
    isTablet: screenSize === 'tablet',
    isDesktop: screenSize === 'desktop',
    width: typeof window !== 'undefined' ? window.innerWidth : 0,
  };
}