import { Redirect, Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { FontAwesome5 } from "@expo/vector-icons";
import { LIGTHT_THEME } from "../../src/constants/theme";
import { useAuth } from "../../src/contexts/auth_context";

export default function Layout() {
  const { user } = useAuth();
  console.log(user);
  if (!user) {
    return <Redirect href={'/login'}/>;
  }
  
  return (
    <Tabs
      initialRouteName="index"
      screenOptions={{
        tabBarActiveTintColor: LIGTHT_THEME.color.primary,
        tabBarInactiveTintColor: LIGTHT_THEME.color.secondary,
        headerStyle: {
          backgroundColor: LIGTHT_THEME.color.primary,
        },
        headerTitleStyle: {
          color: LIGTHT_THEME.color.white,
        },
        headerTitleAlign: "center",
        
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: ({ color, focused }) => {
            if (focused) {
              return <Ionicons name="home" size={24} color={color} />;
            }
            return <Ionicons name="home-outline" size={24} color={color} />;
          },
        }}
      />
      <Tabs.Screen
        name="travel_history"
        options={{
          title: "Travel History",
          tabBarIcon: ({ color, focused }) => {
            if (focused) {
              return <FontAwesome5 name="history" size={24} color={color} />;
            }
            return <FontAwesome5 name="history" size={24} color={color} />;
          },
        }}
      />
      <Tabs.Screen
        name="account"
        options={{
          title: "Account",
          tabBarIcon: ({ color, focused }) => {
            if (focused) {
              return <Ionicons name="person" size={24} color={color} />;
            }
            return <Ionicons name="person-outline" size={24} color={color} />;
          },
        }}
        />
    </Tabs>
  );
}
