import React from 'react';
import {
	StyleSheet,
	View,
} from 'react-native';
import {
	Text,
	color,
} from 'nixplay-ui-kit';
import PropTypes from 'prop-types';

const styles = StyleSheet.create({
	badge: {
		position: 'absolute',
		paddingLeft: 4,
		paddingRight: 4,
		height: 20,
		width: 20,
		borderRadius: 10,
		marginBottom: 14,
	},
	badgeText: {
		color: color.white,
		alignSelf: 'center',
		alignContent: 'center',
	},
});


export const Badge = (props) => (
	<View style={[styles.badge, props.style]}>
		<Text
			{...props}
			style={styles.badgeText}
			textStyle="footnote"
		/>
	</View>
);


Badge.propTypes = {
	style: PropTypes.any.isRequired,
};
