/**
 * Responsive utility functions
 * Centralized helpers for responsive behavior
 */

/**
 * Get responsive class names based on condition
 */
export function responsiveClass(
  base: string,
  mobile?: string,
  tablet?: string,
  desktop?: string
): string {
  const classes = [base];
  
  if (mobile) classes.push(`max-md:${mobile}`);
  if (tablet) classes.push(`md:${tablet} max-lg:${tablet}`);
  if (desktop) classes.push(`lg:${desktop}`);
  
  return classes.join(' ');
}

/**
 * Get responsive value based on screen width
 */
export function getResponsiveValue<T>(
  mobile: T,
  tablet: T,
  desktop: T,
  width: number
): T {
  if (width < 768) return mobile;
  if (width < 1024) return tablet;
  return desktop;
}

/**
 * Debounce function for resize events
 */
export function debounce<T extends (...args: any[]) => any>(
  func: T,
  wait: number
): (...args: Parameters<T>) => void {
  let timeout: NodeJS.Timeout;
  
  return (...args: Parameters<T>) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
}

/**
 * Check if device supports touch
 */
export function isTouchDevice(): boolean {
  return (
    'ontouchstart' in window ||
    navigator.maxTouchPoints > 0 ||
    (navigator as any).msMaxTouchPoints > 0
  );
}

/**
 * Get optimal column count for grid based on width
 */
export function getGridColumns(width: number, itemMinWidth: number = 300): number {
  return Math.max(1, Math.floor(width / itemMinWidth));
}

/**
 * Format text for mobile (truncate if needed)
 */
export function formatTextForMobile(
  text: string,
  maxLength: number = 100,
  isMobile: boolean
): string {
  if (!isMobile || text.length <= maxLength) return text;
  return text.substring(0, maxLength) + '...';
}

/**
 * Get responsive font size
 */
export function getResponsiveFontSize(
  baseSize: number,
  width: number
): number {
  if (width < 768) return baseSize * 0.875; // 87.5% for mobile
  if (width < 1024) return baseSize * 0.9375; // 93.75% for tablet
  return baseSize;
}