import { BoxProps } from '../box';
import * as React from 'react';
import * as StyledSystem from 'styled-system';
import { FlexProps } from '../flex';

interface StackPropsBase {
  /**
   * If `true` the items will be stacked horizontally inline.
   */
  isInline?: boolean;
  /**
   * The content of the stack.
   */
  children?: React.ReactNode[] | React.ReactNode;
  /**
   * The space between each stack item
   */
  spacing?: StyledSystem.MarginProps['margin'];
  /**
   * The alignment of the stack item. Similar to `align-items`
   */
  align?: FlexProps['align'];
  /**
   * The distribution of the stack item. Similar to `justify-content`
   */
  justify?: FlexProps['justify'];
  /**
   * If `true`, the children will be wrapped in a `Box` with
   * `display: inline-block`, and the `Box` will take the spacing props
   */
  shouldWrapChildren?: boolean;
}

export type StackProps = StackPropsBase & BoxProps;
