import { useState, useEffect } from 'react';

interface ResponsiveState {
  isMobile: boolean;
  isTablet: boolean;
  isDesktop: boolean;
  isLargeDesktop: boolean;
  width: number;
  height: number;
}

export function useResponsive(): ResponsiveState {
  const [responsive, setResponsive] = useState<ResponsiveState>({
    isMobile: false,
    isTablet: false,
    isDesktop: false,
    isLargeDesktop: false,
    width: 0,
    height: 0,
  });

  useEffect(() => {
    const updateResponsive = () => {
      const width = window.innerWidth;
      const height = window.innerHeight;

      setResponsive({
        isMobile: width < 768,
        isTablet: width >= 768 && width < 1024,
        isDesktop: width >= 1024 && width < 1536,
        isLargeDesktop: width >= 1536,
        width,
        height,
      });
    };

    // Initial check
    updateResponsive();

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

    // Cleanup
    return () => window.removeEventListener('resize', updateResponsive);
  }, []);

  return responsive;
}

// Utility function for responsive particle density
export function getResponsiveParticleDensity(baseValue: number, responsive: ResponsiveState): number {
  if (responsive.isMobile) return Math.floor(baseValue * 0.4);
  if (responsive.isTablet) return Math.floor(baseValue * 0.7);
  return baseValue;
}

// Utility function for responsive animation duration
export function getResponsiveAnimationDuration(baseDuration: number, responsive: ResponsiveState): number {
  if (responsive.isMobile) return baseDuration * 0.8;
  return baseDuration;
}