import React from 'react';
import {
	Text,
	StyleSheet,
	Platform,
} from 'react-native';
import PropTypes from 'prop-types';
import { color, transparentize } from '~/styles/variables';

export const textStyles = StyleSheet.create({
	titleStyle: {
		fontSize: 17,
		lineHeight: 22,
		letterSpacing: -0.408,
		fontWeight: '600',
		opacity: 1,
	},
	shadow: {
		textShadowRadius: 4,
		textShadowOffset: { width: 0, height: 2 },
		textShadowColor: transparentize(color.black, 50),
	},
});


// Hack to fix android text got cut
// https://github.com/facebook/react-native/issues/15114#issuecomment-364458149
const styles = StyleSheet.create({
	text: {
		...(Platform.OS === 'android' ? { fontFamily: 'Roboto' } : {}
		),
	},
});


export const Title = (props) => (
	<Text
		{...props}
		style={[
			styles.text,
			textStyles.titleStyle,
			props.style,
			{ color: props.textColor },
			props.withShadow && textStyles.shadow,
		]}
	/>
);

Title.propTypes = {
	textColor: PropTypes.string,
	style: PropTypes.any,
	withShadow: PropTypes.bool,
};

Title.defaultProps = {
	textColor: 'white',
	style: {},
	withShadow: false,
};
