import {View, Text, Image} from 'react-native'
import React from 'react'
import {Tabs} from "expo-router";
import icons from "@/constants/icons"

const TabIcon = ({focused, icon, title }: {focused: boolean, icon: any, title: string}) => (
    <View className={"flex-1 mt-3 flex flex-col items-center"}>
        <Image source={icon} tintColor={focused ? '#0061ff' : 'black'}
        resizeMode={'contain'} className={'size-6'}
        />
        <Text className={'text-xs text-center w-full mt-1'}>{title}</Text>
    </View>
)

const TabsLayout = () => {
    // @ts-ignore
    return (
        <Tabs screenOptions={{
            tabBarShowLabel: false,
            tabBarStyle : {
            backgroundColor: 'white',
                position: 'absolute',
                borderTopColor: 'blue',
                borderTopWidth: 1,
                minHeight: 70,
        }
        }}
        >
            <Tabs.Screen
                name="index"
                options={{
                    title: 'home',
                    headerShown: false,
                    tabBarIcon: (focused) => (
                        <TabIcon icon={icons.home} focused={true} title={'home'}/>
                    )

                }}
            />

            <Tabs.Screen
                name="explore"
                options={{
                    title: 'explore',
                    headerShown: false,
                    tabBarIcon: (focused) => (
                        <TabIcon icon={icons.search} focused={true} title={'explore'}/>
                    )

                }}
            />

            <Tabs.Screen
                name="profile"
                options={{
                    title: 'profile',
                    headerShown: false,
                    tabBarIcon: (focused) => (
                        <TabIcon icon={icons.person} focused={true} title={'profile'}/>
                    )

                }}
            />
        </Tabs>
    )
}
export default TabsLayout