/**
 * 响应式间距 Hook
 */

import { useMemo } from 'react';
import { useBreakpoint } from './useBreakpoint';
import { FineBreakpointKey } from './constants';

const DEFAULT_SPACING_CONFIG: Record<FineBreakpointKey, number> = {
  xs: 8,
  sm: 8,
  md: 12,
  lg: 16,
  xl: 20,
  '2xl': 24,
  '3xl': 32,
  '4xl': 40,
};

/**
 * 响应式间距 Hook
 * 
 * @param spacingConfig - 间距配置
 * @returns 当前断点对应的间距值
 * 
 * @example
 * const gap = useResponsiveSpacing({ xs: 8, md: 16, lg: 24 });
 */
export function useResponsiveSpacing(
  spacingConfig: Partial<Record<FineBreakpointKey, number>> = {}
): number {
  const { fineBreakpoint } = useBreakpoint();
  
  return useMemo(() => {
    const config = { ...DEFAULT_SPACING_CONFIG, ...spacingConfig };
    const breakpointOrder: FineBreakpointKey[] = ['4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs'];
    const currentIndex = breakpointOrder.indexOf(fineBreakpoint);
    
    for (let i = currentIndex; i < breakpointOrder.length; i++) {
      const bp = breakpointOrder[i];
      if (config[bp] !== undefined) {
        return config[bp];
      }
    }
    
    return DEFAULT_SPACING_CONFIG.xs;
  }, [fineBreakpoint, spacingConfig]);
}