import { Pressable, Text, View } from "react-native"
import DrawerBottom from "./drawerBottom"
import { AntDesign } from "@expo/vector-icons"
import Styles from "@/constants/Styles"
import { ButtonForm } from "./buttonForm"
import { router } from "expo-router"


type Props = {
   open: boolean,
   close: (value: boolean) => void
   page: 'position' | 'member' | 'discussion'
}

export default function ModalFilter({ open, close, page }: Props) {
   return (
      <DrawerBottom animation="slide" isVisible={open} setVisible={close} title="Filter" height={75}>
         <View style={{ justifyContent: 'space-between', flex: 1 }}>
            <View>
               <Pressable style={[Styles.itemSelectModal]}>
                  <Text style={[Styles.textDefaultSemiBold]}>Dinas</Text>
                  <AntDesign name="check" size={20} />
               </Pressable>
               <Pressable style={[Styles.itemSelectModal]}>
                  <Text>Adat</Text>
               </Pressable>
               <Pressable style={[Styles.itemSelectModal]}>
                  <Text>Karang Taruna</Text>
               </Pressable>
               <Pressable style={[Styles.itemSelectModal]}>
                  <Text>PKK</Text>
               </Pressable>
            </View>
            <View>
               <ButtonForm text="Terapkan" onPress={() => {
                  close(false)
                  router.push(`/${page}?active=true`)
               }} />
            </View>
         </View>
      </DrawerBottom>
   )
}