import * as React from 'react';
import style from './HBox.st.css';
import {addSpacing} from './utils';

export interface HBoxProps {
  children?: React.ReactNode;
  verticalAlignment?: Alignment;
  spacing?: number;
  dir?: 'ltr' | 'rtl';
}

export type Alignment = 'top' | 'center' | 'bottom';

const defaultProps: HBoxProps = {
  children: null,
  verticalAlignment: 'top',
  spacing: 0,
  dir: 'ltr'
};

/**
 * HBox
 */
export const HBox: React.SFC<HBoxProps> = props => {
  const {children, verticalAlignment, spacing, dir} = props;
  return <div {...style('root', {verticalAlignment}, props)}>{addSpacing(children, spacing, dir)}</div>;
};

HBox.displayName = 'HBox';

HBox.defaultProps = defaultProps;