// ======================== _layout.jsx ==================

import { Stack } from "expo-router";

export default function RootLayout() {
    return (
        <Stack>
            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        </Stack>
    );
}



// ======================= _layout.web.jsx ===================================
import { Button, Image } from "react-native";
import { Stack } from "expo-router";
import { NavBarRight, NavBarCenter } from "../components/NavBar";

const headerOptions = {
    headerStyle: {
        backgroundColor: "#000",
    },
    headerTintColor: "#fff", // Ensures the text/buttons are visible against the black background
    headerTitleStyle: {
        fontWeight: "bold",
    },
    headerShown: true,
    headerTitleAlign: "center",

    // Custom Button in the headerTitle
    headerTitle: () => <NavBarRight />,

    // Custom logo in the headerLeft
    headerLeft: () => <NavBarCenter />,
};

export default function RootLayout() {
    const routes = [
        { name: "home", title: "Home" },
        { name: "about", title: "About" },
    ];

    return (
        <Stack screenOptions={headerOptions}>
            {routes.map((route) => (
                <Stack.Screen
                    key={route.name}
                    name={route.name}
                    options={{ title: route.title }}
                />
            ))}
        </Stack>
    );
}

// (tabs) directory _layout.jsx
// =====================
import FontAwesome from "@expo/vector-icons/FontAwesome";
import { Tabs } from "expo-router";

export default function TabLayout() {
    return (
        <Tabs screenOptions={{ tabBarActiveTintColor: "blue" }}>
            <Tabs.Screen
                name="(tabs)/index"
                options={{
                    title: "Home",
                    tabBarIcon: ({ color }) => (
                        <FontAwesome size={28} name="home" color={color} />
                    ),
                }}
            />
            <Tabs.Screen
                name="settings"
                options={{
                    title: "Settings",
                    tabBarIcon: ({ color }) => (
                        <FontAwesome size={28} name="cog" color={color} />
                    ),
                }}
            />
        </Tabs>
    );
}