interaktive-systeme/components/budget/budgetHeader.tsx

import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
import { useTheme } from "../../app/contexts/ThemeContext";
import TextInputBar from "../common/TextInputBar";

type BudgetHeaderProperties = {
    selectedPage: string,
    handlePageSelection: (page: "expense" | "saving") => void,
}

type PageSelectorButtonProperties = {
    isSelected: boolean,
    onPress: () => void,
    label: string,
}

const BudgetHeader = (properties: BudgetHeaderProperties) => {
    const {colors} = useTheme();
    const backgroundColor = colors.backgroundColor; 

    return (<>
        <View style={styles.containerStyle}>
            <PageSelectorButton 
                label="Expenses"
                isSelected={properties.selectedPage === "expense"}
                onPress={() => {
                    properties.handlePageSelection("expense")
                }}
            />
            <PageSelectorButton 
                label="Savings"
                isSelected={properties.selectedPage === "saving"}
                onPress={() => {
                    properties.handlePageSelection("saving");
                }}
            />
        </View>
    </>);
}

const PageSelectorButton = (properties: PageSelectorButtonProperties) => {
    const {colors} = useTheme();

    const primaryTextColor = colors.primaryText;
    const secondaryTextColor = colors.secondaryText;
    const elementSelectedColor = colors.elementSelectedColor;
    const elementDefaultColor = colors.elementDefaultColor;
    const accentColor = colors.accentColor;

    return (
        <TouchableHighlight
            underlayColor={elementDefaultColor}
            onPress={properties.onPress}
            style={[styles.headerContainerStyle, properties.isSelected ? {backgroundColor: accentColor} : {backgroundColor: elementDefaultColor}]}>
            <Text
            style={[styles.headerTextStyle, properties.isSelected ? {color: primaryTextColor} : {color: secondaryTextColor}]}>
                {properties.label}
            </Text>

        </TouchableHighlight>
    );
}

export default BudgetHeader;

const styles = StyleSheet.create({
    headerContainerStyle: {
        width: "50%",
        borderRadius: 10,
        marginHorizontal: 30,
    },
    headerTextStyle: {
        fontSize: 30,
        textAlign: "center",
        textAlignVertical: "center",
    },
    containerStyle: {
        flexDirection: "row",
        justifyContent: "space-evenly",
        marginBottom: 20,
        marginHorizontal: 10,
        marginTop: 10,
    },
    searchBarStyle: {
        marginBottom: 20,
    }
});