import React from 'react';
import PropTypes from 'prop-types';
import { TouchableHighlight, View, Text, StyleSheet } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

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

export const styles = StyleSheet.create({
	li: {
		paddingTop: 10,
		paddingLeft: 15,
		paddingRight: 15,
		paddingBottom: 10,
	},
	item: {
		flexDirection: 'row',
		justifyContent: 'space-between',
	},
	liText: {
		fontSize: fontSizes.large,
		color: color.white,
	},
});

export const MenuItem = (props) => {
	const { children, onClick } = props;
	return (
		<TouchableHighlight
			style={styles.li}
			onPress={onClick}
			underlayColor={color.menuBlueHighlight}
		>
			<View style={styles.item}>
				<Text style={styles.liText}>{ children }</Text>
				<Ionicons
					name="ios-arrow-forward"
					style={{ color: color.white, fontSize: fontSizes.xlarge }}
				/>
			</View>
		</TouchableHighlight>
	);
};

MenuItem.propTypes = {
	children: PropTypes.string.isRequired,
	onClick: PropTypes.func.isRequired,
};
