import React from 'react';
import { Text as ReactText } from 'react-native';
import PropTypes from 'prop-types';
import { fontMaker } from '~/styles/fonts';
import { color, fontSizes } from '~/styles/variables';

export const Text = (props) => {
	const {
		fontWeight, fontStyle, fontSize, ...other
	} = props;
	const fontProp = {
		weight: props.fontWeight,
		style: props.fontStyle,
	};
	return (
		<ReactText
			{...other}
			style={[fontMaker(fontProp), {
				fontSize: fontSizes[props.fontSize],
				color: color[props.color],
				backgroundColor: 'transparent',
			}, props.style]}
		/>
	);
};

Text.propTypes = {
	fontWeight: PropTypes.string,
	fontStyle: PropTypes.string,
	fontSize: PropTypes.string,
	color: PropTypes.string,
	style: PropTypes.any,
};

Text.defaultProps = {
	fontWeight: 'Normal',
	fontStyle: 'normal',
	fontSize: 'base',
	color: 'black',
	style: {},
};
