import React from 'react';
import PropTypes from 'prop-types';
import { Text, StyleSheet, View, ViewPropTypes } from 'react-native';

import { color } from '~/styles/variables';

const labelStyles = StyleSheet.create({
	container: {
		alignSelf: 'flex-start',
		flexShrink: 1,
		borderRadius: 2,
	},
	small: {
		height: 16,
		paddingLeft: 6,
		paddingRight: 6,
	},
	caption: {
		fontSize: 11,
		lineHeight: 13,
		letterSpacing: 0.066,
	},
});

export const Label = (props) => (
	<View style={[
		labelStyles.container,
		labelStyles.small,
		{ backgroundColor: color[props.labelColor] },
		props.style,
	]}
	>
		<Text style={[labelStyles.caption, { color: color[props.textColor] }]}>{props.label}</Text>
	</View>
);

Label.propTypes = {
	...ViewPropTypes,
	label: PropTypes.string.isRequired,
	labelColor: PropTypes.string,
	textColor: PropTypes.string,
	style: PropTypes.any,
};

Label.defaultProps = {
	labelColor: 'blue',
	textColor: 'white',
	style: {},
};
