/**
 * 반응형 레이아웃 시스템 타입 정의
 */

/**
 * 브레이크포인트 타입 정의
 */
export type Breakpoint = "desktop" | "tablet" | "mobile";

/**
 * 브레이크포인트별 설정
 */
export interface BreakpointConfig {
  minWidth: number; // 최소 너비 (px)
  maxWidth?: number; // 최대 너비 (px)
  columns: number; // 그리드 컬럼 수
}

/**
 * 기본 브레이크포인트 설정
 */
export const BREAKPOINTS: Record<Breakpoint, BreakpointConfig> = {
  desktop: {
    minWidth: 1200,
    columns: 12,
  },
  tablet: {
    minWidth: 768,
    maxWidth: 1199,
    columns: 8,
  },
  mobile: {
    minWidth: 0,
    maxWidth: 767,
    columns: 4,
  },
};

/**
 * 브레이크포인트별 반응형 설정
 */
export interface ResponsiveBreakpointConfig {
  gridColumns?: number; // 차지할 컬럼 수 (1-12)
  order?: number; // 정렬 순서
  hide?: boolean; // 숨김 여부
}

/**
 * 컴포넌트별 반응형 설정
 */
export interface ResponsiveComponentConfig {
  // 기본값 (디자이너에서 설정한 절대 위치)
  designerPosition: {
    x: number;
    y: number;
    width: number;
    height: number;
  };

  // 반응형 설정 (선택적)
  responsive?: {
    desktop?: ResponsiveBreakpointConfig;
    tablet?: ResponsiveBreakpointConfig;
    mobile?: ResponsiveBreakpointConfig;
  };

  // 스마트 기본값 사용 여부
  useSmartDefaults?: boolean;
}