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

export default function Search() {
   return (
      <>
         <SafeAreaView>
            <Stack.Screen
               options={{
                  headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                  headerTitle: 'Pencarian',
                  headerTitleAlign: 'center'
               }}
            />
            <ScrollView>
               <View style={[Styles.p15]}>
                  <InputForm
                     type="default"
                     placeholder="Pencarian"
                     round
                     itemLeft={<Feather name="search" size={20} color="grey" />}
                  />
                  <View style={[Styles.wrapPaper, Styles.mb100]}>
                     <View style={[Styles.mb30]}>
                        <Text>ANGGOTA</Text>
                        <BorderBottomItem
                           icon={<Image
                              source={require("../../assets/images/user.jpeg")}
                              style={[Styles.userProfileSmall]}
                           />}
                           title="Amalia Dwi"
                           subtitle="Dinas - Bendaraha"
                        />
                        <BorderBottomItem
                           icon={<Image
                              source={require("../../assets/images/user.jpeg")}
                              style={[Styles.userProfileSmall]}
                           />}
                           title="Amalia Dwi"
                           subtitle="Dinas - Bendaraha"
                        />

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

                     <View style={[Styles.mb30]}>
                        <Text>DIVISI</Text>
                        <BorderBottomItem
                           icon={
                              <View style={[Styles.iconContent, ColorsStatus.primary]}>
                                 <MaterialIcons name="group" size={30} color="white" />
                              </View>
                           }
                           title="TU dan Umum"
                           subtitle="Dinas"
                        />
                        <BorderBottomItem
                           icon={
                              <View style={[Styles.iconContent, ColorsStatus.primary]}>
                                 <MaterialIcons name="group" size={30} color="white" />
                              </View>
                           }
                           title="TU dan Umum"
                           subtitle="Dinas"
                        />
                     </View>
                     <View style={[Styles.mb05]}>
                        <Text>KEGIATAN</Text>
                        <BorderBottomItem
                           icon={
                              <View style={[Styles.iconContent, ColorsStatus.primary]}>
                                 <AntDesign name="areachart" size={30} color="white" />
                              </View>
                           }
                           title="Kerja Bakti"
                           subtitle="Dinas"
                        />
                        <BorderBottomItem
                           icon={
                              <View style={[Styles.iconContent, ColorsStatus.primary]}>
                                 <AntDesign name="areachart" size={30} color="white" />
                              </View>
                           }
                           title="Pasar Ramadhan"
                           subtitle="Dinas"
                        />
                        <BorderBottomItem
                           icon={
                              <View style={[Styles.iconContent, ColorsStatus.primary]}>
                                 <AntDesign name="areachart" size={30} color="white" />
                              </View>
                           }
                           title="Pasar Ramadhan"
                           subtitle="Dinas"
                        />
                     </View>
                  </View>
               </View>
            </ScrollView>
         </SafeAreaView>
      </>
   )
}