import { CSSVariables } from '../utils/types.js';

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

export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';

export type FlexJustifyContent =
  | 'flex-start'
  | 'flex-end'
  | 'center'
  | 'space-between'
  | 'space-around'
  | 'space-evenly';

export type FlexAlignItems =
  | 'flex-start'
  | 'flex-end'
  | 'center'
  | 'baseline'
  | 'stretch';

export type FlexAlignContent =
  | 'flex-start'
  | 'flex-end'
  | 'center'
  | 'space-between'
  | 'space-around'
  | 'stretch';

export type FlexProps = {
  as?: NonNullable<
    | 'div'
    | 'span'
    | 'section'
    | 'article'
    | 'aside'
    | 'nav'
    | 'header'
    | 'footer'
    | 'main'
    | 'ul'
    | 'ol'
    | 'li'
  >;
  direction?: FlexDirection;
  wrap?: FlexWrap;
  justifyContent?: FlexJustifyContent;
  alignItems?: FlexAlignItems;
  alignContent?: FlexAlignContent;
  gap?: string;
  paddingInline?: string;
  paddingBlock?: string;
  marginInline?: string;
  marginBlock?: string;
  inline?: boolean;
  maxWidth?: string;
  maxHeight?: string;
  className?: string;
  style?: CSSVariables;
  children?: React.ReactNode;
};
