import {Appbar, Button, Text, useTheme} from "react-native-paper";
import {View} from "react-native";
import styles from "@/assets/styles";
import React from "react";

const BottomNav = ({ toggleLocation }: { toggleLocation: () => void; }) => {
    const theme = useTheme();
    return (
        <View style={{ backgroundColor: theme.colors.background }}>
            <Appbar.Header style={[styles.bottomBar, { backgroundColor: theme.colors.primaryContainer }]} >
                <View style={{ alignItems: "center", flexDirection: "row", justifyContent: "space-between", padding: 10, flex: 1, paddingHorizontal: 15 }}>
                    <Text style={{ color: theme.colors.primary, fontFamily: "SpaceReg" }}>Daisy Knight Dog Park</Text>
                    <Button
                        mode="text"
                        onPress={() => toggleLocation }
                        style={{ backgroundColor: theme.colors.primary, height: styles.bottomBar.height/2, justifyContent: "center"}}
                        labelStyle={{ color: theme.colors.onPrimary, fontFamily: "SpaceReg"}}>
                        Change
                    </Button>
                </View>
            </Appbar.Header>
        </View>
    )
}

export default BottomNav;
