import React from 'react';
import { Animated, StyleProp, ViewStyle, View, FlexAlignType } from 'react-native';

interface IFlexProps extends React.ComponentProps<any> {
   flex?: number;
   horizontal?: boolean;
   vertical?: boolean;
   alignItems?: FlexAlignType;
   justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
}

export const Flex: React.FunctionComponent<IFlexProps> = ({
   flex,
   horizontal,
   vertical,
   alignItems,
   justifyContent,
   children,
   ...rest
}) => {
   const style: StyleProp<any> = rest?.style ?? {};

   if (flex) style.flex = flex;
   if (horizontal) style.flexDirection = 'row';
   if (vertical) style.flexDirection = 'column';
   if (alignItems) style.alignItems = alignItems;
   if (justifyContent) style.justifyContent = justifyContent;

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