import { StylableComponentProps } from '../theme'

export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'

export interface FlexConfig {
    flexDirection?: FlexDirection,
    justifyContent?: JustifyContent,
    alignItems?: AlignItems,
}

export type FlexConfigKey = keyof FlexConfig;

export type JustifyContent = 'flex-start'
    | 'flex-end'
    | 'center'
    | 'space-between'
    | 'space-around'
    | 'around'
    | 'between'

export type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'between' | 'around'

export interface FlexProps extends StylableComponentProps {
    children?: any
    styles?: any
    direction?: FlexDirection
    justify?: JustifyContent
    align?: AlignItems
    width?: number
    onClick?: any
    fullWidth?: boolean
    expand?: string
}