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

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

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

type ResponsiveStackedOptions = {|
  stacked: {
    [breakpoint: BreakPoint]: StackedVariantKey,
  },
  justify: {
    [breakpoint: BreakPoint]: JustifyVariantKey,
  },
  align: {
    [breakpoint: BreakPoint]: StackedAlignVariantKey,
  },
|};

export type StackedProps = StackedOptions | ResponsiveStackedOptions;
