/**
 * Responsive Service
 * Provides breakpoint constants and utility functions for responsive design
 */

export const BREAKPOINTS = {
  xs: 0,      // Extra small devices (phones)
  sm: 640,    // Small devices (large phones)
  md: 768,    // Medium devices (tablets)
  lg: 1024,   // Large devices (desktops)
  xl: 1280,   // Extra large devices (large desktops)
  '2xl': 1536, // 2X Extra large devices
} as const;

export type BreakpointKey = keyof typeof BREAKPOINTS;

export const DEVICE_TYPES = {
  MOBILE: 'mobile',
  TABLET: 'tablet',
  DESKTOP: 'desktop',
} as const;

export type DeviceType = typeof DEVICE_TYPES[keyof typeof DEVICE_TYPES];

/**
 * Get current device type based on window width
 */
export const getDeviceType = (width: number): DeviceType => {
  if (width < BREAKPOINTS.md) {
    return DEVICE_TYPES.MOBILE;
  } else if (width < BREAKPOINTS.lg) {
    return DEVICE_TYPES.TABLET;
  }
  return DEVICE_TYPES.DESKTOP;
};

/**
 * Check if width matches a breakpoint
 */
export const isBreakpoint = (width: number, breakpoint: BreakpointKey): boolean => {
  return width >= BREAKPOINTS[breakpoint];
};

/**
 * Check if width is within a range
 */
export const isBetweenBreakpoints = (
  width: number,
  min: BreakpointKey,
  max: BreakpointKey
): boolean => {
  return width >= BREAKPOINTS[min] && width < BREAKPOINTS[max];
};

/**
 * Get current breakpoint name based on width
 */
export const getCurrentBreakpoint = (width: number): BreakpointKey => {
  if (width >= BREAKPOINTS['2xl']) return '2xl';
  if (width >= BREAKPOINTS.xl) return 'xl';
  if (width >= BREAKPOINTS.lg) return 'lg';
  if (width >= BREAKPOINTS.md) return 'md';
  if (width >= BREAKPOINTS.sm) return 'sm';
  return 'xs';
};

/**
 * Check if device is mobile
 */
export const isMobile = (width: number): boolean => {
  return width < BREAKPOINTS.md;
};

/**
 * Check if device is tablet
 */
export const isTablet = (width: number): boolean => {
  return width >= BREAKPOINTS.md && width < BREAKPOINTS.lg;
};

/**
 * Check if device is desktop
 */
export const isDesktop = (width: number): boolean => {
  return width >= BREAKPOINTS.lg;
};

/**
 * Check if device is mobile or tablet
 */
export const isMobileOrTablet = (width: number): boolean => {
  return width < BREAKPOINTS.lg;
};

