import React from 'react';
import { View } from 'react-native';

import { DisplayMode } from '../../lib/constants';
import { useTheme } from '../../theme';
import IconOrAvatar from './IconOrAvatar';
import { IWrapperProps } from './interfaces';
import styles from './styles';

const Wrapper = ({ accessibilityLabel, children, displayMode, ...props }: IWrapperProps): React.ReactElement => {
	const { colors } = useTheme();
	return (
		<View
			style={[styles.container, displayMode === DisplayMode.Condensed && styles.containerCondensed]}
			accessibilityLabel={accessibilityLabel}>
			<IconOrAvatar displayMode={displayMode} {...props} />
			<View
				style={[
					styles.centerContainer,
					{
						borderColor: colors.separatorColor
					}
				]}>
				{children}
			</View>
		</View>
	);
};

export default Wrapper;