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

function TabBarIcon({ name, color, size }: { name: string; color: string; size: number }) {
  return <Ionicons name={name as any} size={size} color={color} />;
}

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

  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: theme.colors.primary,
        tabBarInactiveTintColor: theme.colors.tabInactive,
        tabBarStyle: {
          backgroundColor: theme.colors.surface,
          borderTopWidth: 1,
          borderTopColor: theme.colors.borderLight,
          elevation: 0,
          height: 64 + insets.bottom,
          paddingBottom: insets.bottom + 6,
          paddingTop: 8,
          shadowColor: theme.colors.shadow,
          shadowOffset: { width: 0, height: -2 },
          shadowOpacity: 0.04,
          shadowRadius: 4,
        },
        tabBarLabelStyle: {
          fontSize: 11,
          fontWeight: "500",
          marginTop: 2,
        },
        tabBarHideOnKeyboard: true,
        tabBarItemStyle: {
          marginHorizontal: 2,
          marginVertical: 2,
        },
      }}
    >
      <Tabs.Screen
        name="(home)"
        options={{
          title: "Почетна",
          tabBarIcon: ({ color, size }) => <TabBarIcon name="home" color={color} size={size} />,
          tabBarAccessibilityLabel: "Почетна",
        }}
      />
      <Tabs.Screen
        name="(explore)"
        options={{
          title: "Категории",
          tabBarIcon: ({ color, size }) => <TabBarIcon name="grid" color={color} size={size} />,
          tabBarAccessibilityLabel: "Категории",
        }}
      />
      <Tabs.Screen
        name="(posts)"
        options={{
          title: "Побарувања",
          tabBarIcon: ({ color, size }) => <TabBarIcon name="document-text" color={color} size={size} />,
          tabBarAccessibilityLabel: "Побарувања",
        }}
      />
      <Tabs.Screen
        name="(chat)"
        options={{
          title: "Чат",
          tabBarIcon: ({ color, size }) => <TabBarIcon name="chatbubbles" color={color} size={size} />,
          tabBarAccessibilityLabel: "Чат",
        }}
      />
      <Tabs.Screen
        name="(profile)"
        options={{
          title: "Профил",
          tabBarIcon: ({ color, size }) => <TabBarIcon name="person" color={color} size={size} />,
          tabBarAccessibilityLabel: "Профил",
        }}
      />
    </Tabs>
  );
}