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

export default function DetailEventCalendar() {
   const { id, detail } = useLocalSearchParams()

   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Detail Acara',
               headerTitleAlign: 'center',
               headerRight: () => <HeaderRightCalendarDetail id={detail} />
            }}
         />
         <ScrollView>
            <View style={[Styles.p15]}>
               <View style={[Styles.wrapPaper, Styles.mb15]}>
                  <View style={Styles.rowItemsCenter}>
                     <MaterialCommunityIcons name="calendar-text" size={30} color="black" style={Styles.mr10} />
                     <Text style={[Styles.textDefault]}>Rapat Libur Lebaran</Text>
                  </View>
                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
                     <MaterialCommunityIcons name="calendar-month-outline" size={30} color="black" style={Styles.mr10} />
                     <Text style={[Styles.textDefault]}>10 Maret 2025</Text>
                  </View>
                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
                     <MaterialCommunityIcons name="clock-outline" size={30} color="black" style={Styles.mr10} />
                     <Text style={[Styles.textDefault]}>07:30 | 09:45</Text>
                  </View>
                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
                     <MaterialCommunityIcons name="repeat" size={30} color="black" style={Styles.mr10} />
                     <Text style={[Styles.textDefault]}>Acara 1 Kali</Text>
                  </View>
                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
                     <MaterialCommunityIcons name="link-variant" size={30} color="black" style={Styles.mr10} />
                     <Text style={[Styles.textDefault]}>meet.com</Text>
                  </View>
                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
                     <MaterialCommunityIcons name="card-text-outline" size={30} color="black" style={Styles.mr10} />
                     <Text style={[Styles.textDefault]}>Rapat persiapan libur panjang lebaran</Text>
                  </View>
               </View>

               <View style={[Styles.mb15]}>
                  <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
                     <Text style={[Styles.textDefaultSemiBold]}>Anggota</Text>
                     <Text style={[Styles.textDefault]}>Total 4 Anggota</Text>
                  </View>

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