import Styles from "@/constants/Styles"
import { MaterialIcons } from "@expo/vector-icons"
import { Modal, Pressable, Text, View } from "react-native"

type Props = {
   isVisible: boolean
   setVisible: (value: boolean) => void
   title?: string
   children: React.ReactNode
   animation: 'slide' | 'none' | 'fade'
   height?: number
}

export default function DrawerBottom({ isVisible, setVisible, title, children, animation, height }: Props) {
   return (
      <Modal animationType={animation} transparent={true} visible={isVisible}>
         <View style={[Styles.modalBgTransparant]}>
            <View style={[Styles.modalContent, height != undefined && { height: `${height}%` }]}>
               <View style={Styles.titleContainer}>
                  <Text style={Styles.textDefault}>{title}</Text>
                  <Pressable onPress={() => setVisible(false)}>
                     <MaterialIcons name="close" color="black" size={22} />
                  </Pressable>
               </View>
               <View style={Styles.contentContainer}>
                  {children}
               </View>
            </View>
         </View>
      </Modal>
   )
}