import HeaderRightAnnouncementList from "@/components/announcement/headerAnnouncementList";
import BorderBottomItem from "@/components/borderBottomItem";
import ButtonBackHeader from "@/components/buttonBackHeader";
import InputSearch from "@/components/inputSearch";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { MaterialIcons } from "@expo/vector-icons";
import { router, Stack } from "expo-router";
import { SafeAreaView, ScrollView, View } from "react-native";

export default function Announcement() {
   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Pengumuman',
               headerTitleAlign: 'center',
               headerRight: () => <HeaderRightAnnouncementList />
            }}
         />

         <ScrollView>
            <View style={[Styles.p15, Styles.mb100]}>
               <InputSearch />
               <BorderBottomItem
                  onPress={() => {router.push('/announcement/7493')}}
                  borderType="bottom"
                  icon={
                     <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
                        <MaterialIcons name="campaign" size={25} color={'#384288'} />
                     </View>
                  }
                  title="Libur Nyepi"
                  desc="Pengumuman terkait libur nyepi"
                  rightTopInfo="23 Mar 2025"
               />
               <BorderBottomItem
                  onPress={() => {router.push('/announcement/7493')}}
                  borderType="bottom"
                  icon={
                     <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
                        <MaterialIcons name="campaign" size={25} color={'#384288'} />
                     </View>
                  }
                  title="Libur Nyepi"
                  desc="Pengumuman terkait libur nyepi"
                  rightTopInfo="23 Mar 2025"
               />
               <BorderBottomItem
                  onPress={() => {router.push('/announcement/7493')}}
                  borderType="bottom"
                  icon={
                     <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
                        <MaterialIcons name="campaign" size={25} color={'#384288'} />
                     </View>
                  }
                  title="Libur Nyepi"
                  desc="Pengumuman terkait libur nyepi"
                  rightTopInfo="23 Mar 2025"
               />
               <BorderBottomItem
                  onPress={() => {router.push('/announcement/7493')}}
                  borderType="bottom"
                  icon={
                     <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
                        <MaterialIcons name="campaign" size={25} color={'#384288'} />
                     </View>
                  }
                  title="Libur Nyepi"
                  desc="Pengumuman terkait libur nyepi"
                  rightTopInfo="23 Mar 2025"
               />
               <BorderBottomItem
                  onPress={() => {router.push('/announcement/7493')}}
                  borderType="bottom"
                  icon={
                     <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
                        <MaterialIcons name="campaign" size={25} color={'#384288'} />
                     </View>
                  }
                  title="Libur Nyepi"
                  desc="Pengumuman terkait libur nyepi"
                  rightTopInfo="23 Mar 2025"
               />
               <BorderBottomItem
                  onPress={() => {router.push('/announcement/7493')}}
                  borderType="bottom"
                  icon={
                     <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
                        <MaterialIcons name="campaign" size={25} color={'#384288'} />
                     </View>
                  }
                  title="Libur Nyepi"
                  desc="Pengumuman terkait libur nyepi"
                  rightTopInfo="23 Mar 2025"
               />
               <BorderBottomItem
                  onPress={() => {router.push('/announcement/7493')}}
                  borderType="bottom"
                  icon={
                     <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
                        <MaterialIcons name="campaign" size={25} color={'#384288'} />
                     </View>
                  }
                  title="Libur Nyepi"
                  desc="Pengumuman terkait libur nyepi"
                  rightTopInfo="23 Mar 2025"
               />
            </View>
         </ScrollView>
      </SafeAreaView>
   )
}