// @flow
import type { BreakPoint } from '../../breakpoints';

export type StackedVariantKey = 'row' | 'column';
export type JustifyVariantKey =
  | 'start'
  | 'end'
  | 'center'
  | 'space-between'
  | 'space-around'
  | 'space-evenly';
export type AlignVariantKey = 'start' | 'end' | 'center' | 'stretch';

type ResponsiveStackedVariant = {
  [breakpoint: BreakPoint]: StackedVariantKey,
};

type ResponsiveJustifyVariant = {
  [breakpoint: BreakPoint]: JustifyVariantKey,
};

type ResponsiveAlignVariant = {
  [breakpoint: BreakPoint]: AlignVariantKey,
};

export type StackedProps = {|
  stacked?: StackedVariantKey | ResponsiveStackedVariant,
  justify?: JustifyVariantKey | ResponsiveJustifyVariant,
  align?: AlignVariantKey | ResponsiveAlignVariant,
  wrap?: boolean | BreakPoint[],
|};

export type StackedOptions = {|
  stacked?: StackedVariantKey,
  justify?: JustifyVariantKey,
  align?: AlignVariantKey,
  wrap?: boolean,
|};
