import { flexAlign, flexJustify } from '../Flex/Flex.interface';

import { CSSProperties } from 'react';

export interface IRowBase {
  className?: string,
  style?: CSSProperties
  children?: React.ReactNode
}
export interface IRow extends IRowBase {
  fluid?: boolean,
  direction?: 'row' | 'column',
  align?: flexAlign,
  justify?: flexJustify,
  wrap?: 'wrap' | 'nowrap',
  mobileSpace?: boolean
}
export interface IRowSC extends IRowBase {
  $fluid?: boolean,
  $direction?: 'row' | 'column',
  $align?: flexAlign,
  $justify?: flexJustify,
  $wrap?: 'wrap' | 'nowrap',
  $mobileSpace?: boolean
}

export type IColumnsSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | number;

export interface IColumnBase {
  className?: string,
  style?: CSSProperties
  children?: React.ReactNode
}

export interface IColumnSC extends IColumnBase {
  $align?: flexAlign,
  $lg?: IColumnsSize
  $md?: IColumnsSize
  $sm?: IColumnsSize
  $xs?: IColumnsSize
  $mobileOrder?: number
}

export interface IColumn extends IColumnBase {
  align?: flexAlign,
  lg?: IColumnsSize
  md?: IColumnsSize
  sm?: IColumnsSize
  xs?: IColumnsSize
  mobileOrder?: number
}


export type Flex = IRow