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' | 'dokumen' | 'type' | 'location' | 'owner' | 'calendar' | 'share'
   value: string | undefined
   border?: boolean
}


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]} />
   },
   dokumen: {
      label: 'Dokumen',
      icon: <MaterialCommunityIcons name="file-document-outline" size={22} color="black" style={[Styles.mr10]} />
   },
   type: {
      label: 'Tipe',
      icon: <MaterialIcons name="category" size={22} color="black" style={[Styles.mr10]} />
   },
   location: {
      label: 'Lokasi',
      icon: <MaterialIcons name="location-pin" size={22} color="black" style={[Styles.mr10]} />
   },
   owner: {
      label: 'Pemilik',
      icon: <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
   },
   calendar: {
      label: 'Tanggal',
      icon: <MaterialCommunityIcons name="calendar-blank" size={22} color="black" style={[Styles.mr10]} />
   },
   share: {
      label: 'Bagikan',
      icon: <MaterialCommunityIcons name="share-variant-outline" size={22} color="black" style={[Styles.mr10]} />
   }
}


export default function ItemDetailMember({ category, value, border }: Props) {
   return (
      <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, !border && Styles.mt10, border && Styles.wrapItemBorderBottom]}>
         <View style={[Styles.rowItemsCenter]}>
            {data[category].icon}
            <Text style={[Styles.textDefault]}>{data[category].label}</Text>
         </View>
         <Text style={[Styles.textDefault, Styles.w60, { textAlign: 'right' }]} numberOfLines={1} ellipsizeMode="tail">{value}</Text>
      </View>
   )
}