import { icons } from "@/constants";
import { router } from "expo-router";
import { Image, Text, TouchableOpacity, View } from "react-native";
import {GestureHandlerRootView} from "react-native-gesture-handler";
import tw from "twrnc";
import Map from "@/components/Map";
import { useRef } from "react";
import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
const Ridelayout = ({title,children,snapPoints}:{snapPoints?:string[], title:string,children:React.ReactNode}) => {
    const bottomSheetRef = useRef<BottomSheet>(null)
    return(
        <GestureHandlerRootView>
        <View style={tw`flex-1 bg-white`} >
            <View style={tw`flex flex-col h-full bg-blue-500`} >
            <View style={tw`flex flex-row absolute z-10 top-16 items-center justify-start px-5`} >
                <TouchableOpacity onPress={() => router.back()}>
                    <View style={tw`w-10 h-10 bg-white rounded-full items-center justify-center`} >
                        <Image source={icons.backArrow} resizeMode="contain" style={tw`w-6 h-6`} />
                    </View>
                </TouchableOpacity>
                <Text style={tw`text-xl font-JakartaSemiBold ml-5` }> {title ||"Go Back"}</Text>
            </View>
            <Map />
            </View>
            <BottomSheet keyboardBehavior="extend" ref={bottomSheetRef} snapPoints={ snapPoints || ["40%","85%"]} index={0} >
              <BottomSheetView style={{flex:1,padding:20}} >{children}</BottomSheetView>  
            </BottomSheet>
        </View>
        </GestureHandlerRootView> 
    )
}

export default Ridelayout;