import { View, Text, StyleSheet } from "react-native";
import { LIGHT_THEME } from "../../common/const/theme";
import { FontAwesome } from "@expo/vector-icons";

export const AboutUsPage = () => {
    return (
        <View style={styles.container}>
            <Text>Equipo de desarrollo</Text>
            <View>
                <ItemTeamList name="Diego Iván Correa Navarrete" role="Backend Developer" />
                <ItemTeamList name="Omar Luna Hernández" role="Developer" />
                <ItemTeamList name="Lorenzo Trujillo Rojas" role="Developer" />
            </View>
        </View>
    );
};

interface ItemTeam {
    name: string;
    role: string;
}

const ItemTeamList = ({name, role}: ItemTeam) => {
    return (
        <View style= {styles.itemTeam}>
            <FontAwesome name="circle" size={10} color="black" />
            <Text style= {styles.nameTeam}>{name}</Text>
            <View style={{flex: 1}} />
            <Text style={styles.roleTeamText}>{role}</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: "100%",
        padding: 20,
        backgroundColor: LIGHT_THEME.color.background,
    },
    itemTeam: {
        width: "100%",
        flexDirection: "row",
        backgroundColor: "red",
        gap: 10,
        alignItems: "center",
        height: 30,
    },
    nameTeam: {
        fontSize: 18,
    },
    roleTeamText: {
        fontSize: 18,
        fontWeight: "bold",
        
    }
});