import { StyleSheet, Text, View } from "react-native";
import { useThemeColor } from "../../hooks/useThemeColor";
import SearchBar from "../common/SearchBar";

const BudgetHeader = () => {
    const primaryTextColor = useThemeColor("primaryText");
    const secondaryTextColor = useThemeColor("secondaryText");



    return (<>
        <View style={styles.containerStyle}>
                <Text style={[styles.selectedHeaderTextStyle, {color: primaryTextColor}]}>Expense View</Text>
                <Text style={[styles.defaultHeaderTextStyle, {color: secondaryTextColor}]}>Savings View</Text>
        </View>
        <SearchBar placeholder='Search...'></SearchBar>
    </>);
}

export default BudgetHeader;

const styles = StyleSheet.create({
    selectedHeaderTextStyle: {
        fontSize: 40,
        fontWeight: "bold",
    },
    defaultHeaderTextStyle: {
        fontSize: 20,
    },
    containerStyle: {
        backgroundColor: "blue",
        flexDirection: "row",
        justifyContent: "space-between",
    },
});