import * as React from 'react';
import { OmitPolyfill, Spacing } from '../common';

export type BoxProps = {
  inline?: boolean;
  className?: string;
  direction?: BoxDirection;
  align?: BoxHorizontalAlignment;
  verticalAlign?: BoxVerticalAlignment;
  dataHook?: string;
  gap?: BoxCssSizingProperty;
  padding?: BoxCssSizingProperty;
  paddingTop?: BoxCssSizingProperty;
  paddingRight?: BoxCssSizingProperty;
  paddingBottom?: BoxCssSizingProperty;
  paddingLeft?: BoxCssSizingProperty;
  margin?: BoxCssSizingProperty;
  marginTop?: BoxCssSizingProperty;
  marginRight?: BoxCssSizingProperty;
  marginBottom?: BoxCssSizingProperty;
  marginLeft?: BoxCssSizingProperty;
  minWidth?: BoxCssSizingProperty;
  maxWidth?: BoxCssSizingProperty;
  width?: BoxCssSizingProperty;
  minHeight?: BoxCssSizingProperty;
  maxHeight?: BoxCssSizingProperty;
  height?: BoxCssSizingProperty;
}

type CSSProperties = OmitPolyfill<React.CSSProperties, 'direction'>

declare const Box: React.FC<BoxProps & CSSProperties>;
export default Box;

export type BoxDirection = 'horizontal' | 'vertical';

export type BoxHorizontalAlignment =
  | 'left'
  | 'center'
  | 'right'
  | 'space-between';

export type BoxVerticalAlignment =
  | 'top'
  | 'middle'
  | 'bottom'
  | 'space-between';

export type BoxSpacing = 'tiny' | 'small' | 'medium' | 'large';

type BoxCssSizingProperty = BoxSpacing | Spacing | string | number;