import { CSSProperties } from 'react'

interface IFlexBase {
  className?: string
  style?: CSSProperties
  children?: React.ReactNode
}
export type flexAlign =
  | 'flex-start'
  | 'center'
  | 'flex-end'
  | 'stretch'
  | string
export type flexJustify =
  | 'flex-start'
  | 'center'
  | 'flex-end'
  | 'space-between'
  | string

export interface IFlex extends IFlexBase {
  direction?: 'row' | 'column'
  align?: flexAlign
  justify?: flexJustify
  wrap?: 'wrap' | 'nowrap'
  gap?: string
}
export interface IFlexSC extends IFlexBase {
  $direction?: 'row' | 'column'
  $align?: flexAlign
  $justify?: flexJustify
  $wrap?: 'wrap' | 'nowrap'
  $gap?: string
}