import { useUser } from '@clerk/clerk-react'
import Ionicons from '@expo/vector-icons/Ionicons'
import { Tabs } from 'expo-router'
import React from 'react'

export default function TabLayout() {
    const { user } = useUser()

    return (
        <Tabs
            screenOptions={{
                tabBarActiveTintColor: '#ffd33d',
                headerStyle: {
                    backgroundColor: '#25292e'
                },
                headerShadowVisible: false,
                headerTintColor: '#fff',
                tabBarStyle: {
                    backgroundColor: '#25292e'
                }
            }}
        >
            <Tabs.Screen
                name='home'
                options={{
                    title: 'Home',
                    headerShown: false,
                    tabBarIcon: ({ color, focused }) => (
                        <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
                    )
                }}
            />
            <Tabs.Screen
                name='posts'
                options={{
                    title: 'Posts',
                    headerShown: false,
                    tabBarIcon: ({ color, focused }) => (
                        <Ionicons name={focused ? 'rocket-sharp' : 'rocket-outline'} size={24} color={color} />
                    ),
                    tabBarItemStyle: { display: user?.publicMetadata.role === 'admin' ? 'flex' : 'none' }
                }}
            />
            <Tabs.Screen
                name='profile'
                options={{
                    title: 'Profile',
                    headerShown: false,
                    tabBarIcon: ({ color, focused }) => (
                        <Ionicons
                            name={focused ? 'person-circle-sharp' : 'person-circle-outline'}
                            size={24}
                            color={color}
                        />
                    )
                }}
            />
        </Tabs>
    )
}