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

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

export default function TabLayout() {
    const scheme = useColorScheme();
    const dark = scheme === "dark";
    const c = dark ? DARK : LIGHT;

    return (
        <Tabs
            screenOptions={{
                headerShown: false,
                tabBarStyle: {
                    backgroundColor: c.bg,
                    borderTopColor: c.border,
                    borderTopWidth: 1,
                    height: 64,
                    paddingBottom: 10,
                    paddingTop: 6,
                },
                tabBarActiveTintColor:   c.active,
                tabBarInactiveTintColor: c.inactive,
                tabBarLabelStyle: { fontSize: 11, fontWeight: "600" },
            }}
        >
            <Tabs.Screen
                name="index"
                options={{
                    title: "Subscribed",
                    tabBarIcon: ({ focused, color, size }) => (
                        <Ionicons name={focused ? "bookmark" : "bookmark-outline"} size={size} color={color} />
                    ),
                }}
            />
            <Tabs.Screen
                name="all"
                options={{
                    title: "All",
                    tabBarIcon: ({ focused, color, size }) => (
                        <Ionicons name={focused ? "compass" : "compass-outline"} size={size} color={color} />
                    ),
                }}
            />
            <Tabs.Screen
                name="profile"
                options={{
                    title: "Profile",
                    tabBarIcon: ({ focused, color, size }) => (
                        <Ionicons name={focused ? "person-circle" : "person-circle-outline"} size={size} color={color} />
                    ),
                }}
            />
        </Tabs>
    );
}