import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useTheme } from "../../components/theme";

export default function TabLayout() {
  const theme = useTheme();
  const insets = useSafeAreaInsets();

  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: theme.colors.tabActive,
        tabBarInactiveTintColor: theme.colors.tabInactive,
        tabBarStyle: {
          backgroundColor: theme.colors.card,
          borderTopWidth: 1,
          borderTopColor: theme.colors.borderLight,
          paddingTop: 4,
          paddingBottom: insets.bottom,
          height: 56 + insets.bottom,
        },
        tabBarLabelStyle: { fontSize: 11, fontWeight: "500", marginTop: -2 },
        tabBarHideOnKeyboard: true,
      }}
    >
      <Tabs.Screen
        name="(home)"
        options={{
          title: "Почетна",
          tabBarIcon: ({ color, size }) => <Ionicons name="home-outline" size={size} color={color} />,
          tabBarAccessibilityLabel: "Почетна",
        }}
      />
      <Tabs.Screen
        name="(explore)"
        options={{
          title: "Пребарување",
          tabBarIcon: ({ color, size }) => <Ionicons name="search-outline" size={size} color={color} />,
          tabBarAccessibilityLabel: "Пребарување",
        }}
      />
      <Tabs.Screen
        name="(posts)"
        options={{
          title: "Побарувања",
          tabBarIcon: ({ color, size }) => <Ionicons name="document-text-outline" size={size} color={color} />,
          tabBarAccessibilityLabel: "Побарувања",
        }}
      />
      <Tabs.Screen
        name="(chat)"
        options={{
          title: "Чат",
          tabBarIcon: ({ color, size }) => <Ionicons name="chatbubble-outline" size={size} color={color} />,
          tabBarAccessibilityLabel: "Чат",
        }}
      />
      <Tabs.Screen
        name="(profile)"
        options={{
          title: "Профил",
          tabBarIcon: ({ color, size }) => <Ionicons name="person-outline" size={size} color={color} />,
          tabBarAccessibilityLabel: "Профил",
        }}
      />
    </Tabs>
  );
}