import React, { HTMLAttributes } from 'react';

interface IFlexContainerProps extends HTMLAttributes<HTMLDivElement> {
   width?: string | number;
   height?: string | number;
   inlineFlex?: boolean;
   wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
   justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
   alignItems?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
   alignContent?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
   direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
}

export const FlexContainer: React.FunctionComponent<IFlexContainerProps> = (props) => {
   const style: any = {
      display: 'flex',
      flexDirection: 'row',
   };

   const { children, ...rest } = props;

   if (props.width) style.width = props.width;
   if (props.height) style.height = props.height;
   if (props.inlineFlex) style.display = 'inline-flex';
   if (props.direction) style.flexDirection = props.direction;
   if (props.wrap) style.flexWrap = props.wrap;
   if (props.justifyContent) style.justifyContent = props.justifyContent;
   if (props.alignItems) style.alignItems = props.alignItems;
   if (props.alignContent) style.alignContent = props.alignContent;

   return (
      <div style={style} {...rest}>
         {children}
      </div>
   );
};
