import React, { ComponentType } from 'react';

import { useTheme } from './ThemeContext';

import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';

export type containerDirection = 'column' | 'row' | 'column-reverse' | 'row-reverse';

export type Props = {
  readonly children: React.ReactNode;
  readonly direction?: containerDirection;
  readonly fluid?: boolean;
  readonly style?: StyleProp<ViewStyle>;
};

const Container: ComponentType<Props> = ({ children, fluid = false, direction = 'column', style }: Props) => {
  const theme = useTheme();

  return (
    <View
      style={StyleSheet.flatten([
        theme.container.container,
        fluid ? theme.container.fluid : {},
        { flexDirection: direction },
        style || {},
      ])}
    >
      {children}
    </View>
  );
};

export default Container;