import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { NixplayIcon } from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import { color } from '~/styles/variables';

const styles = StyleSheet.create({
	container: {
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: color.white,
		borderWidth: 1,
		borderColor: color.mistBlue03,
		marginLeft: 3,
	},
	small: {
		borderRadius: 18,
		width: 34,
		height: 34,
	},
	text: {
		textAlign: 'center',
	},
	image: {
		width: '100%',
		height: '100%',
	},
	avatar: {
		aspectRatio: 1,
	},
});

export class PlusIcon extends Component {
	static propTypes = {
		style: PropTypes.any,
		func: PropTypes.any,
	};

	static defaultProps = {
		style: {},
		func: null,
	};

	render() {
		return (
			<View
				{...this.props}
				style={[
					styles.container,
					styles.small,
					this.props.style,
				]}
			>
				<NixplayIcon
					name="plus"
					size={18}
					color={color.blue}
					style={[this.props.style, styles.text]}
				/>
			</View>
		);
	}
}
