import { Ionicons } from "@expo/vector-icons";
import { Tabs } from "expo-router";
import { useThemeStore } from "../../stores/ThemeStore";
import { AuthGuard } from "../../components/AuthGuard";

export default function TabLayout() {
  const { theme } = useThemeStore();
  return (
    <AuthGuard>
      <Tabs
        screenOptions={{
          headerShown: false,
          tabBarActiveTintColor: theme.chatBot,
          tabBarInactiveTintColor: theme.primeFg,
          tabBarStyle: { backgroundColor: theme.primeBg },
        }}
      >
        <Tabs.Screen
          name="chat"
          options={{
            title: "Chat",
            tabBarTestID: "tab-chat",
            tabBarIcon: ({ color }) => (
              <Ionicons size={28} name="chatbubble" color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="calendar"
          options={{
            title: "Calendar",
            tabBarTestID: "tab-calendar",
            tabBarIcon: ({ color }) => (
              <Ionicons size={28} name="calendar" color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="settings"
          options={{
            title: "Settings",
            tabBarTestID: "tab-settings",
            tabBarIcon: ({ color }) => (
              <Ionicons size={28} name="settings" color={color} />
            ),
          }}
        />
      </Tabs>
    </AuthGuard>
  );
}
