import BorderBottomItem from "@/components/borderBottomItem";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { Feather } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";

export default function MemberDiscussionDetail() {
   const { id } = useLocalSearchParams()
   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Anggota Diskusi',
               headerTitleAlign: 'center',
            }}
         />
         <ScrollView>
            <View style={[Styles.p15]}>
               <Text style={[Styles.textDefault, Styles.mv05]}>5 Anggota</Text>
               <View style={[Styles.wrapPaper]}>
                  <BorderBottomItem
                     borderType="none"
                     icon={
                        <View style={[Styles.iconContent, ColorsStatus.gray]}>
                           <Feather name="user-plus" size={25} color={'#384288'} />
                        </View>
                     }
                     title="Tambah Anggota"
                  />

                  <BorderBottomItem
                     borderType="bottom"
                     icon={
                        <Image
                           source={require("../../../../assets/images/user.jpeg")}
                           style={[Styles.userProfileSmall]}
                        />
                     }
                     title="Amalia Dwi"
                  />
                  <BorderBottomItem
                     borderType="bottom"
                     icon={
                        <Image
                           source={require("../../../../assets/images/user.jpeg")}
                           style={[Styles.userProfileSmall]}
                        />
                     }
                     title="Amalia Dwi"
                  />
                  <BorderBottomItem
                     borderType="bottom"
                     icon={
                        <Image
                           source={require("../../../../assets/images/user.jpeg")}
                           style={[Styles.userProfileSmall]}
                        />
                     }
                     title="Amalia Dwi"
                  />
                  <BorderBottomItem
                     borderType="bottom"
                     icon={
                        <Image
                           source={require("../../../../assets/images/user.jpeg")}
                           style={[Styles.userProfileSmall]}
                        />
                     }
                     title="Amalia Dwi"
                  />
                  <BorderBottomItem
                     borderType="bottom"
                     icon={
                        <Image
                           source={require("../../../../assets/images/user.jpeg")}
                           style={[Styles.userProfileSmall]}
                        />
                     }
                     title="Amalia Dwi"
                  />
               </View>
            </View>
         </ScrollView>

      </SafeAreaView>
   )
}