import React, { Component, useContext, useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View, Dimensions } from "react-native";
import { FontAwesome5 } from '@expo/vector-icons';
import { MaterialIcons } from '@expo/vector-icons';

import colors from "../config/colors";
import { dimensions } from "../config/dimensions";
import { Ionicons } from '@expo/vector-icons';

function MenuItens({ item, onPress, icon }) {   
    return (
        <TouchableOpacity onPress={onPress} style={[styles.item]}>
            <View style={{ flexDirection: "row", flex: 1, marginTop: 12 }}>
                <View style={{ flexDirection: "row", flex: 0.20 }}>
                    <Ionicons name="md-rainy" size={24} color={colors.lightBlue} />
                </View>
                <View style={{ flexDirection: "row", flex: 0.70 }}>
                    <Text style={[styles.text]}>{item.name}</Text>
                </View>
                <View
                    style={{ flex: 0.10, alignSelf: "flex-start", flexDirection: "row" }}>
                    <MaterialIcons name={icon} size={24} color={colors.lightBlue} />
                </View>
            </View>
        </TouchableOpacity>
    );
};
export default MenuItens;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "row",
        alignSelf: "flex-end",
        backgroundColor: colors.white,
    },
    text: {
        color: colors.lightBlue,
        fontSize: 14,
        fontWeight: "bold",
    },
    item: {
        color: colors.lightBlue,
        fontSize: dimensions.text.tertiary,
        fontWeight: "bold",
    }

});