// Spacing System
// Spacing scale and layout grid

export interface SpacingScale {
  [key: string]: string;
}

export const spacingScale: SpacingScale = {
  '0': '0',
  '1': '0.25rem',   // 4px
  '2': '0.5rem',    // 8px
  '3': '0.75rem',   // 12px
  '4': '1rem',      // 16px
  '5': '1.25rem',   // 20px
  '6': '1.5rem',    // 24px
  '8': '2rem',      // 32px
  '10': '2.5rem',   // 40px
  '12': '3rem',     // 48px
  '16': '4rem',     // 64px
  '20': '5rem',     // 80px
  '24': '6rem',     // 96px
  '32': '8rem',     // 128px
  '40': '10rem',    // 160px
  '48': '12rem',    // 192px
  '64': '16rem',    // 256px
};

export type SpacingValue = keyof typeof spacingScale;

export interface LayoutGrid {
  columns: number;
  gutter: string;
  maxWidth: string;
  breakpoints: {
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
  };
}

export const layoutGrid: LayoutGrid = {
  columns: 12,
  gutter: spacingScale['4'], // 16px
  maxWidth: '1280px',
  breakpoints: {
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
    '2xl': '1536px',
  },
};

export class SpacingService {
  /**
   * Get spacing value
   */
  static getSpacing(value: SpacingValue | number): string {
    if (typeof value === 'number') {
      return `${value * 0.25}rem`; // Convert to rem (4px base)
    }
    return spacingScale[value] || spacingScale['4'];
  }

  /**
   * Get multiple spacing values (for padding/margin shorthand)
   */
  static getSpacingValues(
    top: SpacingValue | number,
    right?: SpacingValue | number,
    bottom?: SpacingValue | number,
    left?: SpacingValue | number
  ): string {
    const topValue = this.getSpacing(top);
    const rightValue = right !== undefined ? this.getSpacing(right) : topValue;
    const bottomValue = bottom !== undefined ? this.getSpacing(bottom) : topValue;
    const leftValue = left !== undefined ? this.getSpacing(left) : rightValue;

    if (top === right && right === bottom && bottom === left) {
      return topValue;
    }
    if (top === bottom && right === left) {
      return `${topValue} ${rightValue}`;
    }
    return `${topValue} ${rightValue} ${bottomValue} ${leftValue}`;
  }

  /**
   * Get grid column width
   */
  static getGridColumnWidth(columns: number, totalColumns: number = 12): string {
    const percentage = (columns / totalColumns) * 100;
    return `${percentage}%`;
  }

  /**
   * Get grid gap
   */
  static getGridGap(): string {
    return layoutGrid.gutter;
  }
}

