import ButtonBackHeader from "@/components/buttonBackHeader";
import ItemDetailMember from "@/components/itemDetailMember";
import HeaderRightMemberDetail from "@/components/member/headerMemberDetail";
import Styles from "@/constants/Styles";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";

export default function MemberDetail() {
   const { id } = useLocalSearchParams();

   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Anggota',
               headerTitleAlign:'center',
               headerRight: () => <HeaderRightMemberDetail id={id} />,
               headerShadowVisible: false
            }}
         />
         <ScrollView>
            <View style={{ flexDirection: 'column' }}>
               <View style={[Styles.wrapHeadViewMember]}>
                  <Image
                     source={require("../../../assets/images/user.jpeg")}
                     style={[Styles.userProfileBig]}
                  />
                  <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>Putri Ayu Dewi</Text>
                  <Text style={[Styles.textMediumNormal, Styles.cWhite]}>Super Admin</Text>
               </View>
               <View style={[Styles.p15]}>
                  <View style={[Styles.rowSpaceBetween]}>
                     <Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
                  </View>
                  <ItemDetailMember category="nik" value="123456789" />
                  <ItemDetailMember category="group" value="Dinas" />
                  <ItemDetailMember category="position" value="Sekretaris" />
                  <ItemDetailMember category="phone" value="08980873782" />
                  <ItemDetailMember category="email" value="putri@gmail.com" />
                  <ItemDetailMember category="gender" value="Perempuan" />
               </View>
            </View>
         </ScrollView>
      </SafeAreaView>
   )
}