import React, { PureComponent } from "react";
import { TouchableOpacity } from "react-native";
import { Text } from "./Text";
import { TEXT_DARK } from "../colours";

/* 
Props- 
    style - custom style for container
*/

class FontScaleButton extends PureComponent {
	render() {
		return (
			<TouchableOpacity
				style={[styles.container, this.props.style]}
				onPress={this.props.onPress}
			>
				<Text style={styles.text}>
					<Text>A</Text>
					<Text>{` `}</Text>
					<Text style={styles.largeText}>A</Text>
				</Text>
			</TouchableOpacity>
		);
	}
}

const styles = {
	container: {
		padding: 15,
	},
	text: {
		fontFamily: "sf-medium",
		color: TEXT_DARK,
		fontSize: 14,
	},
	largeText: {
		fontSize: 24,
	},
};

export { FontScaleButton };
