import React from 'react';
import { StyleSheet } from 'react-native';
import { SafeAreaView as SafeAreaContext } from 'react-native-safe-area-context';

import { themes } from '../constants/colors';
import { withTheme } from '../theme';

const styles = StyleSheet.create({
	view: {
		flex: 1
	}
});

interface ISafeAreaView {
	testID: string;
	theme: string;
	vertical: boolean;
	style: object;
	children: JSX.Element;
}

const SafeAreaView = React.memo(({ style, children, testID, theme, vertical = true, ...props }: ISafeAreaView) => (
	<SafeAreaContext
		style={[styles.view, { backgroundColor: themes[theme].auxiliaryBackground }, style]}
		edges={vertical ? ['right', 'left'] : undefined}
		testID={testID}
		{...props}>
		{children}
	</SafeAreaContext>
));

export default withTheme(SafeAreaView);