import { Tabs } from "expo-router";
import { useColorScheme } from "react-native";
import { Ionicons } from "@expo/vector-icons";



const LIGHT_TAB = {
    bg:       "#FFFFFF",
    border:   "#E8E2D5",
    active:   "#C4622D",
    inactive: "#8A8278",
};
const DARK_TAB = {
    bg:       "#161513",
    border:   "#2C2A27",
    active:   "#E07B45",
    inactive: "#706D67",
};

export default function TabLayout() {
    const dark = useColorScheme() === "dark";
    const tab  = dark ? DARK_TAB : LIGHT_TAB;

    return (
        <Tabs
            screenOptions={({ route }) => ({
                headerShown: false,
                tabBarStyle: {
                    backgroundColor: tab.bg,
                    borderTopColor:  tab.border,
                    borderTopWidth:  1,
                    height:          60,
                    paddingBottom:   8,
                    paddingTop:      6,
                },
                tabBarActiveTintColor:   tab.active,
                tabBarInactiveTintColor: tab.inactive,
                tabBarLabelStyle: {
                    fontSize:      10,
                    fontWeight:    "600",
                    letterSpacing: 0.3,
                },
                tabBarIcon: ({ focused, color, size }) => {
                    const icons: Record<string, { active: any; inactive: any }> = {
                        index:   { active: "bookmark",      inactive: "bookmark-outline" },
                        all:     { active: "compass",       inactive: "compass-outline" },
                        profile: { active: "person-circle", inactive: "person-circle-outline" },
                    };
                    const set = icons[route.name] ?? icons.index;
                    return (
                        <Ionicons
                            name={focused ? set.active : set.inactive}
                            size={focused ? size + 1 : size}
                            color={color}
                        />
                    );
                },
            })}
        >
            <Tabs.Screen name="index"   options={{ title: "My Feed" }} />
            <Tabs.Screen name="all"     options={{ title: "Discover" }} />
            <Tabs.Screen name="profile" options={{ title: "Profile" }} />
        </Tabs>
    );
}