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

import styles from './styles';
import { themes } from '../../constants/colors';
import Avatar from '../../containers/Avatar';

interface IWrapper {
	accessibilityLabel: string;
	avatar: string;
	avatarSize: number;
	type: string;
	theme: string;
	rid: string;
	children: JSX.Element;
}

const Wrapper = ({ accessibilityLabel, avatar, avatarSize, type, theme, rid, children }: IWrapper) => (
	<View style={styles.container} accessibilityLabel={accessibilityLabel}>
		<Avatar text={avatar} size={avatarSize} type={type} style={styles.avatar} rid={rid} />
		<View
			style={[
				styles.centerContainer,
				{
					borderColor: themes[theme].separatorColor
				}
			]}>
			{children}
		</View>
	</View>
);

export default Wrapper;