import { icons } from "@/constants";
import { Stack, Tabs } from "expo-router";
import { Image, ImageSourcePropType, View } from "react-native";
import tw from "twrnc";
const TabIcon=({source,focused}:{source:ImageSourcePropType; focused:boolean;})=>{
    return(
    <View style={tw.style(`flex flex-row justify-center items-center rounded-full w-7 h-7 ${focused ? "bg-green-300 ":"" } `)}>
        <View style={tw.style(`rounded-full w-12 h-12 items-center justify-center ${focused ? "bg-green-400":"" } `)}>
            <Image source={source} tintColor="white" resizeMode="contain" style={tw`w-7 h-7 `} />
        </View>
    </View>
    );
};
const Layout=()=> {
return(
<Tabs initialRouteName="home" screenOptions={{tabBarActiveTintColor :"white",tabBarInactiveTintColor:"white",tabBarShowLabel:false,tabBarStyle:{backgroundColor:"#333333",paddingBottom:25,borderRadius:50,overflow:"hidden",marginHorizontal:20,marginBottom:20,height:70,display:"flex",justifyContent:"space-between",alignItems:"center",flexDirection:"row",position:"absolute",},headerShown: false, }}>
<Tabs.Screen name="home" options={{title:"Home",  tabBarIcon:({focused})=><TabIcon focused={focused} source={icons.home} /> }} />
<Tabs.Screen name="rides" options={{title:"Rides",  tabBarIcon:({focused})=><TabIcon focused={focused} source={icons.list} /> }} />
<Tabs.Screen name="chat" options={{title:"Chat",  tabBarIcon:({focused})=><TabIcon focused={focused} source={icons.chat} /> }} />
<Tabs.Screen name="profile" options={{title:"Profile",  tabBarIcon:({focused})=><TabIcon focused={focused} source={icons.profile} /> }} />
</Tabs>
)
}
export default Layout;