import { Tabs } from "expo-router";
import { BuildingsIcon, HouseIcon, StorefrontIcon, UserIcon } from "phosphor-react-native";
import { Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function TabsLayout() {
  const insets = useSafeAreaInsets();
  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: "black",
        tabBarInactiveTintColor: "#9ca3af",
        tabBarStyle: {
          // backgroundColor: "red",
          borderTopWidth: 1,
          borderTopColor: "#f1f5f9",
          paddingTop: 14,
          paddingBottom: 6,
          marginBottom: insets.bottom,
          height: 60,
          borderRadius: 20,
          marginLeft: 8,
          marginRight: 8,
          elevation: 0, // Remove Android Shadow
          shadowOpacity: 0, // Remove iOS Shadow
        },
        sceneStyle: {
          backgroundColor: "white",
        },
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarShowLabel: false,

          tabBarIcon: ({ color, size, focused }) => (
            <View className=" justify-center items-center w-20 " pointerEvents="none">
              <HouseIcon size={size} color={color} weight={focused ? "fill" : "bold"} />
              <Text style={{ color }}>Home</Text>
            </View>
          ),
        }}
      />

      <Tabs.Screen
        name="projects"
        options={{
          title: "Projects",
          tabBarShowLabel: false,
          tabBarIcon: ({ color, size, focused }) => (
            <View className=" justify-center items-center w-20 " pointerEvents="none">
              <BuildingsIcon size={size} color={color} weight={focused ? "fill" : "bold"} />
              <Text style={{ color }}>Projects</Text>
            </View>
          ),
        }}
      />

      <Tabs.Screen
        name="marketplace"
        options={{
          title: "Marketplace",
          tabBarShowLabel: false,
          tabBarIcon: ({ color, size, focused }) => (
            <View className=" justify-center items-center w-[84px] " pointerEvents="none">
              <StorefrontIcon size={size} color={color} weight={focused ? "fill" : "bold"} />
              <Text style={{ color }}>Marketplace</Text>
            </View>
          ),
        }}
      />
      <Tabs.Screen
        name="account"
        options={{
          title: "Account",
          tabBarShowLabel: false,
          tabBarIcon: ({ color, size, focused }) => (
            <View className=" justify-center items-center w-20 " pointerEvents="none">
              <UserIcon size={size} color={color} weight={focused ? "fill" : "bold"} />
              <Text style={{ color }}>Account</Text>
            </View>
          ),
        }}
      />
    </Tabs>
  );
}
