import type { ComponentType, ReactNode } from 'react'

export interface FlexGridRowProps {
  children: ReactNode
  verticalAlign?: 'top' | 'middle' | 'bottom'
  horizontalAlign?: 'left' | 'center' | 'right' | 'around' | 'between'
  xsReverse?: boolean
  smReverse?: boolean
  mdReverse?: boolean
  lgReverse?: boolean
  xlReverse?: boolean
  testID?: string
  dataSet?: Record<string, any>
}

export interface FlexGridColProps {
  children?: ReactNode
  xs?: number
  sm?: number
  md?: number
  lg?: number
  xl?: number
  xsOffset?: number
  smOffset?: number
  mdOffset?: number
  lgOffset?: number
  xlOffset?: number
  xsHidden?: boolean
  smHidden?: boolean
  mdHidden?: boolean
  lgHidden?: boolean
  xlHidden?: boolean
  testID?: string
  dataSet?: Record<string, any>
}

export interface FlexGridProps {
  children?: ReactNode
  limitWidth?: boolean
  gutter?: boolean
  outsideGutter?: boolean
  xsReverse?: boolean
  smReverse?: boolean
  mdReverse?: boolean
  lgReverse?: boolean
  xlReverse?: boolean
  tokens?: Record<string, string | number | boolean | object>
  testID?: string
  dataSet?: Record<string, any>
}

declare const FlexGrid: ComponentType<FlexGridProps> & {
  Row: ComponentType<FlexGridRowProps>
  Col: ComponentType<FlexGridColProps>
}

export { FlexGrid }