import { Tabs } from "expo-router/tabs";
import {StyleSheet, View} from "react-native"

import { FontAwesome } from "@expo/vector-icons";
import {useThemeColor} from "../hooks/hooks";

export default function Layout() {
    const selectedColor: string = useThemeColor( "tabIconSelected");
    const defaultColor: string = useThemeColor("tabIconDefault");
    const backgroundColor: string = useThemeColor("backgroundColor");
    const tabBarColor: string = useThemeColor("tabBarColor");

    const styles = StyleSheet.create({
        sceneContainer: {
            backgroundColor: backgroundColor,
        },
        tabBar: {
            backgroundColor: tabBarColor,
        }
    });

    const screenOptions = {
            tabBarActiveTintColor: selectedColor,
            tabBarInactiveTintColor: defaultColor,
            headerShown: false,
            tabBarStyle: styles.tabBar,
    }

    return (
        <Tabs sceneContainerStyle={styles.sceneContainer} initialRouteName={"index"} screenOptions={screenOptions}>
            <Tabs.Screen name="budget" options={
                {
                    tabBarLabel: "Budget",
                    tabBarIcon: ({size, color}) => (
                        <FontAwesome name="money" size={size} color={color}/>),
                }
            }/>
            <Tabs.Screen name="index" options={
                {
                    tabBarLabel: "Home",
                    tabBarIcon: ({size, color}) => (
                        <FontAwesome name="home" size={size} color={color}/>),
                }
            }/>
            <Tabs.Screen name="stats" options={
                {
                    tabBarLabel: "Stats",
                    tabBarIcon: ({size, color}) => (
                        <FontAwesome name="bar-chart" size={size} color={color}/>),
                }
            }/>
        </Tabs>
        );
}