export default function TabLayout() {
    return (
        <View className="flex-1 bg-background-200">
            <Tabs
                className="native:flex-col-reverse"
                screenOptions={{
                    tabBarStyle: {
                        height: "auto",
                    },
                    unmountOnBlur: true,
                }}
            >
                <TabList className="py-3 px-4">
                    <TabTrigger name="index" asChild href="/">
                        <TabButton icon="home">Home</TabButton>
                    </TabTrigger>
                    <TabTrigger name="Suggestion" asChild href="/suggestion">
                        <TabButton icon="feedback">Suggestion</TabButton>
                    </TabTrigger>
                    <TabTrigger name="About" asChild href="/about">
                        <TabButton icon="info">About</TabButton>
                    </TabTrigger>
                    <TabTrigger name="Auth" asChild href="/auth">
                        <TabButton icon="login">Login</TabButton>
                    </TabTrigger>
                    <TabTrigger
                        name="Details"
                        asChild
                        reset="always"
                        href="/details/[id]"
                    />
                </TabList>

                {/* <TabTrigger name="Details" asChild reset="always" href="/details" /> */}
                <SafeAreaProvider>
                    <SafeAreaView className="flex-1 overflow-auto">
                        <TabSlot />
                    </SafeAreaView>
                </SafeAreaProvider>
            </Tabs>
        </View>
    );
}