import React, { HTMLAttributes } from 'react';

interface IFlexItemProps extends HTMLAttributes<HTMLDivElement> {
   width?: string | number;
   height?: string | number;
   flex?: string | number;
   grow?: number;
   basis?: string | number;
   shrink?: string | number;
   alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
}

export const FlexItem: React.FunctionComponent<IFlexItemProps> = (props) => {
   const style: any = {};

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

   if (props.width) style.width = props.width;
   if (props.height) style.height = props.height;
   if (props.flex) style.flex = props.flex;
   if (props.grow) style.flexGrow = props.grow;
   if (props.basis) style.flexBasis = props.basis;
   if (props.shrink) style.flexShrink = props.shrink;
   if (props.alignSelf) style.alignSelf = props.alignSelf;

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