import { BahlaTabBar } from '@/components/navigation/BahlaTabBar';
import { useAuth } from '@/stores/authStore';
import { colors } from '@/theme/colors';
import { Redirect, Tabs } from 'expo-router';
import { Compass, Map, Ticket, UserRound } from 'lucide-react-native';

export default function TabsLayout() {
    const session = useAuth((state) => state.session);

    if (!session) return <Redirect href="../(auth)/login" />;

    if (session.role === 'org') return <Redirect href="../(org)" />;

    return (
        <Tabs
            screenOptions={{
                headerShown: false,
                sceneStyle: { backgroundColor: colors.deepBackground },
            }}
            tabBar={(props) => <BahlaTabBar {...props} />}
        >
            <Tabs.Screen
                name="index"
                options={{
                    title: 'Découvrir',
                    tabBarIcon: ({ color, size }) => <Compass color={color} size={size} />,
                }}
            />
            <Tabs.Screen
                name="map"
                options={{
                    title: 'Carte',
                    tabBarIcon: ({ color, size }) => <Map color={color} size={size} />,
                }}
            />
            <Tabs.Screen
                name="my-events"
                options={{
                    title: 'Mes events',
                    tabBarIcon: ({ color, size }) => <Ticket color={color} size={size} />,
                }}
            />
            <Tabs.Screen
                name="profile"
                options={{
                    title: 'Profil',
                    tabBarIcon: ({ color, size }) => <UserRound color={color} size={size} />,
                }}
            />
        </Tabs>
    );
}