import Styles from "@/constants/Styles";
import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
import { Text, View } from "react-native";

type Props = {
   category: 'nik' | 'group' | 'position' | 'phone' | 'email' | 'gender'
   value: string
}


const data = {
   nik: {
      label: 'NIK',
      icon: <MaterialCommunityIcons name="card-account-details" size={22} color="black" style={[Styles.mr10]} />
   },
   group: {
      label: 'Lembaga Desa',
      icon: <AntDesign name="tags" size={22} color="black" style={[Styles.mr10]} />
   },
   position: {
      label: 'Jabatan',
      icon: <MaterialCommunityIcons name="account-tie" size={22} color="black" style={[Styles.mr10]} />
   },
   phone: {
      label: 'No Telepon',
      icon: <MaterialIcons name="phone" size={22} color="black" style={[Styles.mr10]} />
   },
   email: {
      label: 'Email',
      icon: <MaterialIcons name="email" size={22} color="black" style={[Styles.mr10]} />
   },
   gender: {
      label: 'Jenis Kelamin',
      icon: <MaterialCommunityIcons name="gender-male-female" size={22} color="black" style={[Styles.mr10]} />
   },
}


export default function ItemDetailMember({ category, value }: Props) {
   return (
      <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
         <View style={[Styles.rowItemsCenter]}>
            {data[category].icon}
            <Text style={[Styles.textDefault]}>{data[category].label}</Text>
         </View>
         <Text style={[Styles.textDefaultSemiBold]}>{value}</Text>
      </View>
   )
}